ariakit-react-utils/ts/system.d.ts

Ariakit React utils

import { ElementType, ReactElement } from "react";
import { Component, HTMLProps, Hook, Options, Props } from "./types";
/**
 * Creates a type-safe component with the `as` prop and `React.forwardRef`.
 *
 * @example
 * import { createComponent } from "ariakit-react-utils/system";
 *
 * type Props = {
 *   as?: "div";
 *   customProp?: boolean;
 * };
 *
 * const Component = createComponent<Props>(({ customProp, ...props }) => {
 *   return <div {...props} />;
 * });
 *
 * <Component as="button" customProp />
 */
export declare function createComponent<O extends Options>(render: (props: Props<O>) => ReactElement): Component<O>;
/**
 * Creates a React element that supports the `as` prop, children as a
 * function (render props) and a `wrapElement` function.
 *
 * @example
 * import { createElement } from "ariakit-react-utils/system";
 *
 * function Component() {
 *   const props = {
 *     as: "button" as const,
 *     children: (htmlProps) => <button {...htmlProps} />,
 *     wrapElement: (element) => <div>{element}</div>,
 *   };
 *   return createElement("div", props);
 * }
 */
export declare function createElement(Type: ElementType, props: HTMLProps<Options>): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
/**
 * Creates a component hook that accepts props and returns props so they can be
 * passed to a React element.
 *
 * @example
 * import { Options, createHook } from "ariakit-react-utils/system";
 *
 * type Props = Options<"div"> & {
 *   customProp?: boolean;
 * };
 *
 * const useComponent = createHook<Props>(({ customProp, ...props }) => {
 *   return props;
 * });
 *
 * const props = useComponent({ as: "button", customProp: true });
 */
export declare function createHook<O extends Options>(useProps: (props: Props<O>) => HTMLProps<O>): Hook<O>;