Composition
A collection of utility functions for composing event handlers and refs in React components.
Installation
pnpm dlx shadcn@latest add @diceui/compositionUsage
Composing Refs
useComposedRefs
import { useComposedRefs } from "@/lib/compose-refs"
export function Input({ forwardedRef, ...props }) {
const localRef = React.useRef(null)
const composedRefs = useComposedRefs(forwardedRef, localRef)
return <input ref={composedRefs} {...props} />
}composeRefs
import { composeRefs } from "@/lib/compose-refs"
export function Input({ forwardedRef, ...props }) {
const localRef = React.useRef(null)
const composedRefs = composeRefs(forwardedRef, localRef)
return <input ref={composedRefs} {...props} />
} API Reference
composeRefs
A utility function that composes multiple refs together.
Prop
Type
useComposedRefs
A React hook that composes multiple refs together.
Prop
Type
Credits
- Radix UI - For the
composeRefsanduseComposedRefsutilities.