useHook

Use useHook when a component should add content to a HookSlot somewhere else on the page, such as a shipping note under the add-to-cart form.

ExampleCopy Anchor Link

import { useHook } from '@salla.sa/twilight-theme-engine/hooks/useHook';

export function ShippingNote() {
  useHook('product:single.description.end', () => <p>Ships within 2 days.</p>);
  return null;
}

Render <ShippingNote /> once under your layout, and every slot with that name shows the note.

APICopy Anchor Link

function useHook<T = Record<string, unknown>>(
  name: string,
  handler: HookHandler<T>,
  priority?: number
): void;

type HookHandler<T> = (context: T) => ReactNode;

The context holds what the slot passed in, plus twilight (store, theme and more).

GotchasCopy Anchor Link

• The handler registers in an effect, so it runs in the browser only. Content added with useHook is not in the server-rendered HTML.
• The latest handler is always used, so it can read props and state without re-registering. Registration changes only when name or priority changes.
• For handlers that don't belong to a component, call hookRegistry.register or defineHooks from @salla.sa/twilight-theme-engine/hooks/HookRegistry at startup. This is how the starter theme does it, and it also works on the server.

NextCopy Anchor Link

• HookSlot lists the slot names the engine renders.
• Add content to a slot walks through registering at startup.
• Hooks and slots explains the two meanings of "hook".