| Contract |
|---|
PortalBody | Portals children to element ?? document.body and renders children directly when no DOM container exists. |
Box | Renders a div, an as component, or a Radix Slot when asChild is true. |
Text | Renders a span, an as component, or a Radix Slot when asChild is true. |
MemoizedChildren | Memoizes a fragment whose only prop is children. |
Box and Text receive ref as a normal React 19 prop.
import { Box, PortalBody, Text } from '@udecode/react-utils';
export function Status() {
return (
<Box className="rounded-md border p-3">
<Text as="strong">Connected</Text>
<PortalBody>
<div role="status">Saved</div>
</PortalBody>
</Box>
);
}import { Box, PortalBody, Text } from '@udecode/react-utils';
export function Status() {
return (
<Box className="rounded-md border p-3">
<Text as="strong">Connected</Text>
<PortalBody>
<div role="status">Saved</div>
</PortalBody>
</Box>
);
}| API | Behavior |
|---|---|
composeRefs(...refs) | Writes the same node to callback refs and ref objects, including ref cleanup callbacks. |
useComposedRef(...refs) | Returns a memoized composed ref callback. |
useStableFn(fn, deps?) | Returns a stable function that calls the latest fn. |
useIsomorphicLayoutEffect | Uses useLayoutEffect in the browser and useEffect during SSR. |
import * as React from 'react';
import { useComposedRef } from '@udecode/react-utils';
export function Input({ ref, ...props }: React.ComponentPropsWithRef<'input'>) {
const localRef = React.useRef<HTMLInputElement>(null);
return <input ref={useComposedRef(ref, localRef)} {...props} />;
}import * as React from 'react';
import { useComposedRef } from '@udecode/react-utils';
export function Input({ ref, ...props }: React.ComponentPropsWithRef<'input'>) {
const localRef = React.useRef<HTMLInputElement>(null);
return <input ref={useComposedRef(ref, localRef)} {...props} />;
}composeEventHandlers(original, next, options?) calls original, then calls
next unless the event was prevented and checkForDefaultPrevented is true.