Developers
Start building
Themes/Theme SDK/Modules/chrome/Hooks

Hooks

The hooks of @poltura/theme-sdk/chrome.

On this page
import { … } from '@poltura/theme-sdk/chrome';

useHeader

The data a header draws from: categories, languages, the signed-in shopper and how the header scrolls.

useHeader(): HeaderData

Returns: The header's data.

Example

import { useHeader } from '@poltura/theme-sdk/chrome';

export function HeaderCategories() {
  const { categories } = useHeader();
  return (
    <nav>
      {categories.map((category) => (
        <a key={category.id} href={category.href}>{category.name}</a>
      ))}
    </nav>
  );
}

useLocaleSwitcher

The language choice.

useLocaleSwitcher(): LocaleSwitcherState

Changes the language without leaving the page: hrefFor keeps the path, query and hash; switchTo also stores the choice so the store root opens in it next time.

Returns: The current language, the available ones and the ways to switch.

Example

import { useLocaleSwitcher } from '@poltura/theme-sdk/chrome';

export function LanguageLinks() {
  const { available, current, hrefFor } = useLocaleSwitcher();
  if (available.length < 2) return null;
  return (
    <nav aria-label={current.label}>
      {available.map((locale) => (
        <a key={locale.tag} href={hrefFor(locale)}>{locale.label}</a>
      ))}
    </nav>
  );
}

useCurrencySwitcher

The currency choice.

useCurrencySwitcher(): CurrencySwitcherState

switchTo moves the cart to the currency, which reprices it, and remembers the choice on this domain.

Returns: The current currency, the available ones and the way to switch.

Example

import { useCurrencySwitcher } from '@poltura/theme-sdk/chrome';

export function CurrencyLinks() {
  const { available, current, switchTo } = useCurrencySwitcher();
  if (available.length < 2) return null;
  return (
    <nav aria-label='Currency'>
      {available.map((currency) => (
        <button key={currency} type='button' aria-pressed={currency === current} onClick={() => switchTo(currency)}>
          {currency}
        </button>
      ))}
    </nav>
  );
}

useStorefrontSwitcher

The storefront choice.

useStorefrontSwitcher(): StorefrontSwitcherState

moveTo carries the cart, repriced in the market's currency, but not the sign-in to another address.

Returns: The market the page shows, the store's other markets, each at a domain or a folder on one, and the way to move to one.

Example

import { useStorefrontSwitcher } from '@poltura/theme-sdk/chrome';

export function StorefrontLinks() {
  const { current, others, moveTo } = useStorefrontSwitcher();
  if (others.length === 0) return null;
  return (
    <nav aria-label='Markets'>
      {current === null ? null : <span aria-current='true'>{current.name}</span>}
      {others.map((storefront) => (
        <button key={storefront.id} type='button' onClick={() => moveTo(storefront)}>
          {storefront.name}
        </button>
      ))}
    </nav>
  );
}

useMobileMenu

The mobile menu's state, shared by every component on the page: the button that opens it and the drawer that shows it.

useMobileMenu(): MobileMenuState

Returns: Whether the menu is open, the submenu it is in and the actions that change both.

Example

import { useMobileMenu } from '@poltura/theme-sdk/chrome';

export function MenuToggle() {
  const menu = useMobileMenu();
  return (
    <button type="button" aria-expanded={menu.open} onClick={() => menu.setOpen(!menu.open)}>
      Menu
    </button>
  );
}

useHeaderVisibility

The header's scroll state.

useHeaderVisibility(): HeaderVisibility

The pinned box itself is host-owned and also publishes these states as data-header-scrolled and data-header-hidden for CSS.

Returns: Whether the page has scrolled past the header and whether a revealing header is hidden, updated as the shopper scrolls; both false on the server.

Example

import { useHeaderVisibility } from '@poltura/theme-sdk/chrome';

export function BackToTop() {
  const { scrolled } = useHeaderVisibility();
  return scrolled ? <a href='#top'>Top</a> : null;
}

usePromoBar

The announcement strip's text and link, live while the merchant edits it.

usePromoBar(): PromoBarState

Returns: Whether the strip shows, its text and its link.

Example

import { usePromoBar } from '@poltura/theme-sdk/chrome';

export function Announcement() {
  const promo = usePromoBar();
  return promo.visible ? <a href={promo.href}>{promo.text}</a> : null;
}
Last updated