Primitive Elements
Low-level HTML element wrappers that support the asChild prop for composition.
import { Primitive } from '@gentleduck/primitives/primitive-elements'import { Primitive } from '@gentleduck/primitives/primitive-elements'Usage
// Renders a native <button>
<Primitive.button onClick={handleClick}>Click me</Primitive.button>
// Renders YOUR element with the button's forwarded props
<Primitive.button asChild>
<a href="/next">Navigate</a>
</Primitive.button>// Renders a native <button>
<Primitive.button onClick={handleClick}>Click me</Primitive.button>
// Renders YOUR element with the button's forwarded props
<Primitive.button asChild>
<a href="/next">Navigate</a>
</Primitive.button>Available elements
Primitive.a, Primitive.button, Primitive.div, Primitive.form, Primitive.h2, Primitive.h3, Primitive.img, Primitive.input, Primitive.label, Primitive.li, Primitive.nav, Primitive.ol, Primitive.p, Primitive.span, Primitive.svg, Primitive.ul
Each accepts all native HTML props for that element type, plus asChild.
dispatchDiscreteCustomEvent
A utility that dispatches a custom event inside flushSync to ensure React processes the resulting state update synchronously. Used internally by primitives that need synchronous event processing for discrete user interactions.
import { dispatchDiscreteCustomEvent } from '@gentleduck/primitives/primitive-elements'import { dispatchDiscreteCustomEvent } from '@gentleduck/primitives/primitive-elements'Building custom primitives
When building your own primitives, use Primitive.* elements as the base to get asChild support for free.
const MyButton = React.forwardRef((props, ref) => {
return <Primitive.button {...props} ref={ref} />
})const MyButton = React.forwardRef((props, ref) => {
return <Primitive.button {...props} ref={ref} />
})