| null | undefined,
value: T,
): void | (() => void);
```
Sets both a function and object React ref.
Returns a callback ref cleanup function when one is provided.
#### `isValidElementWithRef`
```ts
function isValidElementWithRef }>(
element: unknown,
): element is ReactElement
& { ref?: Ref };
```
Checks if an element is a valid React element with a ref.
#### `getRefProperty`
```ts
function getRefProperty(element: unknown): Ref | undefined;
```
Gets the ref property from a React element.
#### `mergeProps`
```ts
function mergeProps>(base: T, overrides: T): T;
```
Merges two sets of props.
### System utilities
Helpers for creating and composing Ariakit React components.
#### `forwardRef`
```ts
function forwardRef>(render: T): T;
```
The same as `React.forwardRef` but passes the `ref` as a prop and returns a component with the same generic type.
Props holding `undefined` are dropped, so passing one behaves the same as omitting it and the component keeps the value it computes for itself.
#### `memo`
```ts
function memo>(
Component: T,
propsAreEqual?: (
prevProps: Readonly>,
nextProps: Readonly>,
) => boolean,
): T;
```
The same as `React.memo` but returns a component with the same generic type.
#### `createElement`
```ts
function createElement(
Type: React.ElementType,
props: Props,
): React.ReactElement>;
```
Creates a React element that supports the `render` and `wrapElement` props.
#### `createHook`
```ts
function createHook<
T extends React.ElementType,
P extends AnyObject = EmptyObject,
>(useProps: (props: Props) => HTMLProps): Hook;
```
Creates a component hook that accepts props and returns props so they can be passed to a React element.
#### `createStoreContext`
```ts
type StoreProvider = React.ComponentType<{
value: T | undefined;
children?: React.ReactNode;
}>;
function createStoreContext(
providers: StoreProvider[] = [],
scopedProviders: StoreProvider[] = [],
): {
context: React.Context;
scopedContext: React.Context;
useContext: () => T | undefined;
useScopedContext: (onlyScoped?: boolean) => T | undefined;
useProviderContext: () => T | undefined;
ContextProvider: (
props: React.ComponentPropsWithoutRef>,
) => React.JSX.Element;
ScopedContextProvider: (
props: React.ComponentPropsWithoutRef>,
) => React.JSX.Element;
};
```
Creates an Ariakit store context with hooks and provider components.
### Type utilities
Shared types for Ariakit React components.
#### `RenderProp`
```ts
type RenderProp & { ref?: React.Ref }> = (
props: P,
) => React.ReactNode;
```
Render prop type.
Example:
```ts
const children: RenderProp = (props) => ;
```
#### `WrapElement`
```ts
type WrapElement = (element: React.ReactElement) => React.ReactElement;
```
The `wrapElement` prop.
#### `Options`
```ts
interface Options {
wrapElement?: WrapElement;
/**
* Allows the component to be rendered as a different HTML element or React
* component. The value can be a React element or a function that takes in the
* original component props and gives back a React element with the props
* merged.
*
* Some Ariakit components detect the type of the underlying element when
* they mount. If the render element's type may change while the component
* is mounted, pass a
* [`key`](https://react.dev/learn/preserving-and-resetting-state) prop that
* changes with the element type so React remounts the component with the
* new element. Remounting resets uncontrolled state, so keep the relevant
// ... 11 more lines
* for more details.
*/
render?: RenderProp | React.ReactElement;
}
```
Custom props including the `render` prop.
#### `HTMLProps`
```ts
type HTMLProps<
T extends React.ElementType,
P extends AnyObject = EmptyObject,
> = Omit, keyof P> & {
[index: `data-${string}`]: unknown;
};
```
HTML props based on the element type, excluding custom props.
Example:
```ts
type ButtonHTMLProps = HTMLProps<"button", { custom?: boolean }>;
```
#### `Props`
```ts
type Props = P &
HTMLProps;
```
Props based on the element type, including custom props.
#### `Hook`
```ts
type Hook = <
ElementType extends React.ElementType = T,
>(
props?: Props,
) => HTMLProps;
```
A component hook that supports the `render` prop and returns HTML props based on the element type.
Example:
```ts
type UseButton = Hook<"button", { custom?: boolean }>;
```