useDocumentClass

Use useDocumentClass when a page needs a class or attribute on <html> or <body>, such as page-product for your CSS, a data-theme, or dir. React cannot reach those elements from inside a component, and this hook also works while the server renders the page.

ExampleCopy Anchor Link

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

export function ProductShell({ children }: { children: React.ReactNode }) {
  useDocumentClass({
    body: { class: ['page-product', 'has-sticky-bar'], 'data-page': 'product' },
    html: { 'data-layout': 'detail' },
  });
  return <main>{children}</main>;
}

APICopy Anchor Link

function useDocumentClass(descriptor: { body?: Attrs; html?: Attrs }): void;

Attrs is an object of attribute names and string values. class can also be an array of class names.

How values combine when several components or nested routes set them:

• class is merged. Every active page's classes are added together, with duplicates removed.
• Any other attribute follows the deepest page: the most nested route's value wins.

Attributes are removed again when the component unmounts, so leaving a page removes its classes.

useHostAttributesCopy Anchor Link

For attributes on one element you render, use useHostAttributes. It returns a ref callback. true sets an empty attribute, and false, null or undefined removes it.

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

export function Panel({ open }: { open: boolean }) {
  const ref = useHostAttributes<HTMLDivElement>({ 'data-open': open, hidden: !open });
  return <div ref={ref}>...</div>;
}

GotchasCopy Anchor Link

• Pass the same shape each render. The hook compares the content, so a new object with the same values does not re-run it.
• The hook only changes attributes. To change what a page contains, render different JSX.
• For language and direction, see Languages and RTL before setting lang or dir yourself.

NextCopy Anchor Link

• Styling shows how to target these classes in your CSS.
• Layouts shows where page frames set their own classes.