║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Composition description: A collection of utility functions for composing event handlers and refs in React components. links: api: /docs/utilities/composition#api-reference

Installation

CLI

npx shadcn@latest add "https://diceui.com/r/composition"

Manual

<Steps> <Step> Copy and paste the following code into your project.

<ComponentSource name="compose-refs" />

</Step> </Steps>

Usage

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.

<AutoTypeTable path="./types/docs/utilities.ts" name="ComposeRefsProps" />

useComposedRefs

A React hook that composes multiple refs together.

<AutoTypeTable path="./types/docs/utilities.ts" name="UseComposedRefsProps" />

Credits

• Radix UI - For the composeRefs and useComposedRefs utilities.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║