Utilities
The infrastructure the components are built from is exported from @shadow-js/primitives (and from @shadow-js/primitives/utils), so you can build the Radix parts…
The infrastructure the components are built from is exported from @shadow-js/primitives (and from
@shadow-js/primitives/utils), so you can build the Radix parts that do not exist yet with the same behavior.
| Radix / need | ShadowJS export | What it does |
|---|---|---|
Primitive, Slot, asChild |
Polymorphic, POLYMORPHIC_TAGS, types PolymorphicProps, PolymorphicTarget |
Renders the element or component named by as, forwarding every prop. as may change over time. |
composeEventHandlers |
composeEventHandlers(external, internal), callHandler, toCallable, alwaysRun |
The application's handler runs first; the library's runs unless it called preventDefault(). |
useComposedRefs |
composeRefs(...refs) |
One ref callback that calls each. |
merging className/style/ref/handlers |
mergeElementProps(...sources) |
Live merge: classes are kept, style objects merge, refs all fire, handlers all run. |
useControllableState |
useControllableState({ value, defaultValue, onChange }) |
[value, set] for the controlled or uncontrolled contract. |
useId |
useBaseId, partId, usePartRegistration |
Ids that are equal on server and client, and aria-labelledby targets that exist only while mounted. |
createContextScope |
createPartContext("Dialog") |
Context whose missing-provider error names the root: <Dialog.Trigger> must be used within <Dialog>. |
Presence |
usePresence(() => open()) |
Keeps content mounted while its exit animation runs. |
DirectionProvider, useDirection |
same names | "ltr" | "rtl" for arrow keys and alignment. |
VisuallyHidden |
VisuallyHidden, visuallyHiddenStyle |
Content hidden visually, kept for screen readers. |
Collection |
createCollection() |
Items registered in any order, read in document order. |
RovingFocusGroup |
useRovingFocus, getRovingTarget |
One tab stop, arrow keys, Home and End. |
| typeahead | createTypeahead, getNextMatch |
Letter keys move to the next matching item. |
FocusScope |
useFocusScope |
Moves focus in, traps it, restores it. |
| focus utilities | getTabbables, getFocusables, isFocusable, focusFirst, getDeepActiveElement |
|
DismissableLayer |
DismissableLayer, registerLayer, getLayerCount |
Escape, outside press and outside focus for the topmost layer. |
aria-hidden (hideOthers) |
hideOthers(target, { mode }) |
aria-hidden, inert or both on everything outside. Reference counted. |
react-remove-scroll |
lockScroll() |
Locks page scroll without a layout shift. |
Popper geometry |
computePosition, usePosition, intersectRects, normalizePadding |
Side, align, offsets, flip, shift, arrow. computePosition is pure and needs no DOM. |
BubbleInput |
HiddenInput |
Native form participation for a custom control. |
| live regions (toasts, status) | announce, clearAnnouncements, disposeAnnouncer |
Polite or assertive announcements. |