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

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

## `useArticle` [#usearticle]

The blog post of the post page the component sits on.

```ts
useArticle(): Article | null
```

**Returns:** The post with its body, headings and related posts, or null outside a post page.

**Example**

```tsx
import { Markdown, useArticle } from '@poltura/theme-sdk/content';

export function PostBody() {
  const article = useArticle();
  if (article === null) return null;
  return (
    <article>
      <h1>{article.title}</h1>
      <Markdown source={article.markdown} />
    </article>
  );
}
```

## `useLegalPage` [#uselegalpage]

The legal document of the legal page the component sits on.

```ts
useLegalPage(): LegalPage | null
```

**Returns:** The document with its versions and feed sections, or null outside a legal document page.

**Example**

```tsx
import { Markdown, useLegalPage } from '@poltura/theme-sdk/content';

export function LegalBody() {
  const legal = useLegalPage();
  if (legal === null) return null;
  return (
    <section>
      <h1>{legal.title}</h1>
      {legal.effectiveLabel ? <p>{legal.effectiveLabel}</p> : null}
      <Markdown source={legal.markdown} />
    </section>
  );
}
```

## `useFaq` [#usefaq]

The FAQ groups of the FAQ page the component sits on.

```ts
useFaq(): readonly FaqGroup[]
```

**Returns:** The groups in the merchant's order, or an empty list outside the FAQ page.

**Example**

```tsx
import { FaqAccordion, useFaq } from '@poltura/theme-sdk/content';

export function FaqList() {
  return (
    <>
      {useFaq().map((group) => (
        <section key={group.id}>
          <h2>{group.title}</h2>
          <FaqAccordion items={group.items} />
        </section>
      ))}
    </>
  );
}
```

## `useContactPage` [#usecontactpage]

The contact page's heading, wording and the store's contact details, company, bank account and social profiles.

```ts
useContactPage(): ContactPageView | null
```

**Returns:** The contact page view, or null outside the contact page.

**Example**

```tsx
import { CompanyInfo, useContactPage } from '@poltura/theme-sdk/content';

export function ContactFacts() {
  const contact = useContactPage();
  if (contact === null) return null;
  return (
    <section>
      <h1>{contact.title}</h1>
      {contact.contact.email ? <a href={`mailto:${contact.contact.email}`}>{contact.contact.email}</a> : null}
      <CompanyInfo company={contact.company} bankAccount={contact.bankAccount} />
    </section>
  );
}
```

## `useBlog` [#useblog]

The blog posts of the blog page the component sits on: the landing page or a category's.

```ts
useBlog(): ArticlePage | null
```

**Returns:** The page of posts with its categories and paging, or null outside the blog pages.

**Example**

```tsx
import { ArticleCard, useBlog } from '@poltura/theme-sdk/content';

export function PostGrid() {
  const blog = useBlog();
  if (blog === null) return null;
  return (
    <div className="grid gap-6 md:grid-cols-3">
      {blog.articles.map((article) => (
        <ArticleCard key={article.id} article={article} readLabel="Read article" />
      ))}
      {blog.page < blog.pageCount ? <a href={blog.pageHref(blog.page + 1)}>Older posts</a> : null}
    </div>
  );
}
```

## `useGuides` [#useguides]

The guides of the help centre page the component sits on: every category, or one category's guides.

```ts
useGuides(): GuidesView | null
```

**Returns:** The categories and guides, or null outside the help centre pages.

**Example**

```tsx
import { useGuides } from '@poltura/theme-sdk/content';

export function GuideList() {
  const guides = useGuides();
  if (guides === null) return null;
  return (
    <ul>
      {guides.guides.map((guide) => (
        <li key={guide.id}>{guide.href ? <a href={guide.href}>{guide.title}</a> : guide.title}</li>
      ))}
    </ul>
  );
}
```

## `useGuide` [#useguide]

The guide of the guide page the component sits on.

```ts
useGuide(): GuidePage | null
```

**Returns:** The guide with its category, headings and related guides, or null outside a guide page.

**Example**

```tsx
import { FileDownloads, Markdown, useGuide } from '@poltura/theme-sdk/content';

export function GuideBody() {
  const guide = useGuide();
  if (guide === null) return null;
  return (
    <article>
      <h1>{guide.title}</h1>
      <Markdown source={guide.body} />
      <FileDownloads attachments={guide.attachments} title="Downloads" />
    </article>
  );
}
```

## `useBanners` [#usebanners]

The merchant's enabled banners in priority order, in the page language.

```ts
useBanners(): readonly Banner[]
```

The host still shows popups and bars by their rules; use this to echo a banner in the theme's own markup.

**Returns:** The banners, or an empty list.

**Example**

```tsx
import { useBanners } from '@poltura/theme-sdk/content';

export function OfferLine() {
  const offer = useBanners().find((banner) => banner.template === 'discount');
  return offer ? <p>{offer.heading}</p> : null;
}
```

## `useCountdown` [#usecountdown]

Counts down to a moment, re-rendering every second until it passes.

```ts
useCountdown(until: string): CountdownTime
```

**Parameters**

- `until: string`: The moment, as an ISO 8601 string or a date and time setting in the store's time zone.

**Returns:** The time left.

**Example**

```tsx
import { Countdown, useCountdown } from '@poltura/theme-sdk/content';

export function SaleEnds({ until }: { until: string }) {
  const left = useCountdown(until);
  if (!left.valid || left.expired) return null;
  return <Countdown hours={left.days * 24 + left.hours} minutes={left.minutes} seconds={left.seconds} />;
}
```