[ @sdxc/ui/mixins ]
headingLevelFallback
Why JS.
import { headingLevelFallback } from "@sdxc/ui/mixins";Usage
Safety net for an independently-hydrated island whose root didn't get its
ambient level threaded in as a level prop. Detects the nearest
ancestor's resolved level and reports it through options.onLevel.
Signature
headingLevelFallback(options: HeadingLevelFallback.Options): MixinDescriptor<HTMLElement>Returns a mixin descriptor for an island's outermost HeadingScope or Heading root's mix prop.
Parameters
| Parameter | Type | Description |
|---|---|---|
options | HeadingLevelFallback.Options | Callback the recovered level is reported through; see HeadingLevelFallback.Options. |
Examples
// An island whose root is a HeadingScope wrapping further content.
function CommentsIsland(handle: Handle) {
let level: HeadingLevel | undefined;
return () => (
<HeadingScope
level={level}
mix={[
headingLevelFallback({
onLevel(detected) {
level = detected;
handle.update();
},
}),
]}
>
<Heading>Comments</Heading>
</HeadingScope>
);
}// An island whose root is a lone Heading.
function SectionTitleIsland(handle: Handle) {
let level: HeadingLevel | undefined;
return () => (
<Heading
level={level}
mix={[
headingLevelFallback({
onLevel(detected) {
level = detected;
handle.update();
},
}),
]}
>
Related articles
</Heading>
);
}Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
Interface
HeadingLevelFallback.Options
Configuration accepted by headingLevelFallback.
| Member | Type | Description |
|---|---|---|
onLevel | (level: HeadingLevel) => void | Called once, on attach, with the ancestor level clamped to the native 1–6 range. Never called when no ancestor carries HEADING_LEVEL_ATTRIBUTE or its value is unparsable. |