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

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

## `useElement` [#useelement]

The section or block instance currently drawing.

```ts
useElement(): ElementContext
```

**Returns:** Its instance id and type key.

**Example**

```tsx
import { useElement } from '@poltura/theme-sdk/elements';

export function Anchor() {
  const { id } = useElement();
  return <span id={`${id}-top`} />;
}
```

## `useChildBlocks` [#usechildblocks]

The shown children of the current element in one region, in authored order and in the shopper's language.

```ts
useChildBlocks<S extends SettingsSchema = SettingsSchema>(slot?: string): ChildBlock<S>[]
```

Prefer `Slot`, which draws each child through its own component; read the list for counts and tabs.

**Parameters**

- `slot?: string`: A region the definition declares; omit for the default region.

**Returns:** The children, empty when there are none.

**Example**

```tsx
import { useChildBlocks } from '@poltura/theme-sdk/elements';

export function TabCount() {
  const tabs = useChildBlocks('tabs');
  return <span>{tabs.length}</span>;
}
```

## `useHasElementBackground` [#usehaselementbackground]

Whether the element has a background: an image or video the merchant gave it.

```ts
useHasElementBackground(): boolean
```

**Returns:** True when [`ElementBackground`](/themes/sdk/reference/elements/parts#elementbackground) draws something.

**Example**

```tsx
import { useHasElementBackground } from '@poltura/theme-sdk/elements';

export function Heading({ text }: { text: string }) {
  const onImage = useHasElementBackground();
  return <h2 className={onImage ? 'text-white' : ''}>{text}</h2>;
}
```

## `useIsPageLead` [#useispagelead]

Whether the section being drawn opens the page, so its picture is the largest one above the fold.

```ts
useIsPageLead(): boolean
```

**Returns:** True inside the page's first section, where a picture loads with `priority`.

**Example**

```tsx
import { useIsPageLead } from '@poltura/theme-sdk/elements';
import { MediaImage } from '@poltura/theme-sdk/media';

export function Backdrop({ image }: { image: string }) {
  const lead = useIsPageLead();
  return <MediaImage image={image} role='hero' priority={lead} />;
}
```