# Block Location & Theme

Every custom block runs inside a larger Notion document. These hooks expose the block's own ID, the container it sits inside, the nearest enclosing page ID, and how the surrounding Notion app is currently presented (e.g. light vs. dark theme).

## API

The host bridge carries these values as explicit `blockId`, `parent`, and `page` fields.

### `useBlockId()`

Returns the custom block's own ID.

Re-renders when the host sends a block location update.

```ts
function useBlockId(): NotionBlockId;
```

For non-React renderers, use `customBlock.getBlockId()` after `initCustomBlock()` resolves:

```ts
await initCustomBlock();

const blockId = customBlock.getBlockId();
```

### `useParent()`

Returns the block's parent in the document tree.

Re-renders when the host sends a block location update.

```ts
function useParent(): NotionParent;

type NotionParent =
  | { type: "page_id"; page_id: string } // inline custom block under a page
  | { type: "block_id"; block_id: NotionBlockId } // inline custom block under a toggle/column/callout/...
  | { type: "data_source_id"; data_source_id: string } // custom block backing a custom collection view
  | { type: "workspace"; workspace: true }; // top-level block parented by a team / workspace
```

For non-React renderers, use `customBlock.getParent()` after `initCustomBlock()` resolves.

### `usePage()`

Returns the nearest enclosing `page` / `collection_view_page` ancestor.

Re-renders when the host sends a block location update.

```ts
function usePage(): { id: NotionPageId };
```

For non-React renderers, use `customBlock.getPage()` after `initCustomBlock()` resolves.

### `useTheme()`

Returns the host's current theme.

Re-renders on every `themeChanged` message.

```ts
function useTheme(): NotionTheme; // "light" | "dark"
```

For non-React renderers, use `customBlock.getTheme()`:

```ts
await initCustomBlock();

const theme = customBlock.getTheme();
```

```tsx
import { usePage, useTheme } from "ncblock";

export function Header() {
  const page = usePage();
  const theme = useTheme();
  return <header data-theme={theme}>Page: {page.id}</header>;
}
```