Hooks
The hooks of @poltura/theme-sdk/elements.
On this page
import { … } from '@poltura/theme-sdk/elements';useElement
The section or block instance currently drawing.
useElement(): ElementContextReturns: Its instance id and type key.
Example
import { useElement } from '@poltura/theme-sdk/elements';
export function Anchor() {
const { id } = useElement();
return <span id={`${id}-top`} />;
}useChildBlocks
The shown children of the current element in one region, in authored order and in the shopper's language.
useChildBlocks<S extends SettingsSchema = SettingsSchema>(slot?: string): ChildBlock<S>[]Prefer Slot, which draws each child through its own component; read the list for counts and tabs.
Parameters
slot?: string: A region the definition declares; omit for the default region.
Returns: The children, empty when there are none.
Example
import { useChildBlocks } from '@poltura/theme-sdk/elements';
export function TabCount() {
const tabs = useChildBlocks('tabs');
return <span>{tabs.length}</span>;
}useHasElementBackground
Whether the element has a background: an image or video the merchant gave it.
useHasElementBackground(): booleanReturns: True when ElementBackground draws something.
Example
import { useHasElementBackground } from '@poltura/theme-sdk/elements';
export function Heading({ text }: { text: string }) {
const onImage = useHasElementBackground();
return <h2 className={onImage ? 'text-white' : ''}>{text}</h2>;
}useIsPageLead
Whether the section being drawn opens the page, so its picture is the largest one above the fold.
useIsPageLead(): booleanReturns: True inside the page's first section, where a picture loads with priority.
Example
import { useIsPageLead } from '@poltura/theme-sdk/elements';
import { MediaImage } from '@poltura/theme-sdk/media';
export function Backdrop({ image }: { image: string }) {
const lead = useIsPageLead();
return <MediaImage image={image} role='hero' priority={lead} />;
}