Skip to content

Layer Provider

@astryxdesign/core v0.7.1 · LayerProvider

Props ​

PropTypeDefaultDescription
toastLayerToastConfig—Toast viewport configuration: position, maxVisible, and a toast-only inset that overrides the provider inset per edge for toasts shown through useToast().
insetLayerInsetevery edge 0A persistent bar floating over a viewport edge, declared once: blockStart, blockEnd, inlineStart, inlineEnd as pixel numbers or CSS lengths. Each edge adds to the gutter every anchored layer keeps from that edge and moves the toast viewport by the same amount.

Slots ​

SlotDescription
defaultApplication subtree that can use the shared layer context.

LayerToastConfig ​

FieldTypeDefaultDescription
positionToastPlacement'bottom-end'Corner the toast viewport sits in: top-start, top-center, top-end, bottom-start, bottom-center, or bottom-end. A placement on ToastViewport still wins.
maxVisiblenumberno limitHow many toasts stay on screen at once. When more are queued, only the newest ones render.
insetLayerInset—Per-edge offset for the toast viewport only. An edge written here replaces the provider inset for that edge; edges left out keep the provider value.

LayerInset ​

FieldTypeDescription
blockStartnumber | stringOffset added to the gutter at the top edge. A number is pixels; a string is any CSS length, such as '4rem' or 'env(safe-area-inset-top, 0px)'.
blockEndnumber | stringSame, for the bottom edge.
inlineStartnumber | stringSame, for the inline-start edge.
inlineEndnumber | stringSame, for the inline-end edge.

Exports ​

ExportTypeDescription
useLayerConfig() => ComputedRef<LayerContextValue> | nullThe nearest provider configuration, or null outside one.
useLayerGutter() => ComputedRef<LayerGutter>Distance an anchored layer keeps from each viewport edge: the larger of the spacing-4 step and the device safe area, plus the provider inset.
resolveInset(inset?: LayerInset) => ResolvedLayerInsetTurns an inset into pixels.
mergeInset(primary?: LayerInset, fallback?: LayerInset) => ResolvedLayerInsetMerges two insets edge by edge: an edge set on primary wins, the rest come from fallback.

Native attributes ​

The component renders no element of its own, so class and style are not forwarded.