# Hooks (/themes/sdk/reference/chrome/hooks)

```ts
import { … } from '@poltura/theme-sdk/chrome';
```

## `useHeader` [#useheader]

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

```ts
useHeader(): HeaderData
```

**Returns:** The header's data.

**Example**

```tsx
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` [#uselocaleswitcher]

The language choice.

```ts
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**

```tsx
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` [#usecurrencyswitcher]

The currency choice.

```ts
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**

```tsx
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` [#usestorefrontswitcher]

The storefront choice.

```ts
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**

```tsx
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` [#usemobilemenu]

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

```ts
useMobileMenu(): MobileMenuState
```

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

**Example**

```tsx
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` [#useheadervisibility]

The header's scroll state.

```ts
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**

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

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

## `usePromoBar` [#usepromobar]

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

```ts
usePromoBar(): PromoBarState
```

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

**Example**

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

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