4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1bda,--- title: React Utils description: API reference for @udecode/react-utils. --- `@udecode/react-utils` provides small React primitives used across Plate UI packages. It is also re-exported from `platejs/react` and `@udecode/cn`. ## Installation ```bash npm install @udecode/react-utils ``` Use direct imports in shared UI packages. Use `platejs/react` when you are already inside a Plate app surface. ## Components | Component | Renders | Notes | | --- | --- | --- | | `PortalBody` | `ReactDOM.createPortal(children, element ?? document.body)` | Returns children directly when no DOM container is available. | | `Box` | Slot-aware `div` | Created with `createSlotComponent('div')`. Supports `as` and `asChild`. | | `Text` | Slot-aware `span` | Created with `createSlotComponent('span')`. Supports `as` and `asChild`. | | `MemoizedChildren` | `React.memo(({ children }) => <>{children})` | Prevents child-only rerenders when parent props are stable. | ```tsx title="Portal to body" import { PortalBody } from '@udecode/react-utils'; export function BodyOverlay() { return (

Saving

); } ``` ## Primitive Factories Use primitive factories when a component needs `asChild`, composed refs, hook-provided props, or hook-provided state. Default element or component. A component that renders `Slot` when `asChild` is true, `as` when provided, otherwise the default element. HTML tag to render. A typed `forwardRef` component for that intrinsic element. Default element or component. Hook used to create state when the caller does not provide `state`. Hook used to derive props, hidden state, and a ref from state. A primitive component with `as`, `asChild`, `options`, `state`, `className`, `style`, and `setProps`. `createPrimitiveComponent` merges hook class names before consumer class names, merges hook style before consumer style, composes forwarded refs with hook refs, and returns `null` when `hidden` is true unless `asChild` is set. ## Ref and Effect Hooks | API | Type | Behavior | | --- | --- | --- | | `composeRefs(...refs)` | `(...refs) => (node) => cleanup?` | Sets callback refs and ref objects to the same node. If refs return cleanup functions, the composed ref returns a cleanup. | | `useComposedRef(...refs)` | `(...refs) => refCallback` | Memoized `composeRefs` callback. | | `useStableFn(fn, deps?)` | `(fn, deps = []) => stableFn` | Returns a stable function that calls the latest `fn`. | | `useStableMemo(producer, deps?)` | `(producer, deps?) => value` | Stores a produced value in state and updates it in a layout effect. | | `useEffectOnce(effect, deps)` | `(effect, deps) => void` | Runs the effect on first render and again when the dependency values change. | | `useIsomorphicLayoutEffect` | `React.useLayoutEffect \| React.useEffect` | Uses layout effect in the browser and effect during SSR. | ```tsx title="Compose refs" import * as React from 'react'; import { useComposedRef } from '@udecode/react-utils'; export const Input = React.forwardRef>( (props, ref) => { const localRef = React.useRef(null); const composedRef = useComposedRef(ref, localRef); return ; } ); ``` ## Outside Click `useOnClickOutside` returns a callback ref unless you pass explicit refs. Called when a configured event lands outside every tracked element. Removes listeners while true. Defaults to `['mousedown', 'touchstart']`. Defaults to `ignore-onclickoutside`. Matching ancestors are ignored. Ignores scrollbar clicks. Defaults to `true`. Uses window blur to detect iframe focus. Explicit refs to observe instead of the returned callback ref. Callback ref that registers an element for outside-click detection. ## Memo and Event Helpers | API | Type | Behavior | | --- | --- | --- | | `useMemoizedSelector(selector, deps, equalityFn?)` | `(selector, deps, equalityFn?) => value` | Re-renders only when the selector result changes. The default equality is strict equality. | | `composeEventHandlers(original, next, options?)` | `(event) => void` | Calls `original`, then calls `next` unless `event.defaultPrevented` and `checkForDefaultPrevented` is true. | ## Component Wrappers Forward-ref render function. Typed `React.forwardRef` result. Providers to wrap around the component. Array entries pass props to a provider. Component to wrap. Component wrapped by the providers from right to left. ```tsx title="Wrap providers" import { withProviders } from '@udecode/react-utils'; const ThemeProvider = ({ children }: { children: React.ReactNode }) => (

{children}

); const Page = () =>

Docs

; export const ThemedPage = withProviders(ThemeProvider)(Page); ``` ## Related APIs - [cn](/docs/api/cn) covers `@udecode/cn`, which re-exports this package. - [Plate](/docs/api/plate) covers the `platejs/react` umbrella export. 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"../../content/docs/api/react-utils.mdx","content":"$50","type":"registry:file","target":"content/docs/plate/api/react-utils.mdx"}],"className":"h-[70svh] min-h-80"}]]}]