> **Can't find what you're looking for?** Use `search_docs` on the docs MCP server at `https://vocs.dev/api/mcp` to find what you need.
>
> **Have feedback?** Use `submit_feedback` on the same MCP server.

# Hooks \[Reference for the React hooks exported from Vocs]

Reference for the hooks exported from `vocs`.

## useConfig

Use `useConfig` in client components to read the resolved Vocs site configuration.

:::code-group
```tsx [Usage]
'use client'

import { useConfig } from 'vocs'

export function SiteMeta() {
  const { title, description } = useConfig() // [!code focus]

  return (
    <>
      <h1>{title}</h1>
      <p>{description}</p>
    </>
  )
}
```

```tsx [Syntax]
const config = useConfig()
```
:::

## useRouter

`useRouter` is re-exported from `waku` and gives you access to the current route plus navigation methods like `push`, `replace`, and `back`.

:::code-group
```tsx [Usage]
'use client'

import { useRouter } from 'vocs'

export function NavigationActions() {
  const router = useRouter() // [!code focus]

  return (
    <button onClick={() => router.push('/introduction/getting-started')}> // [!code focus]
      Get started
    </button>
  )
}
```

```tsx [Syntax]
const { path, query } = useRouter()

router.push('/introduction/getting-started')
router.replace('/reference/components')
router.back()
```
:::

## useActiveSidebarAnchor

Use `useActiveSidebarAnchor` in client components to highlight the in-page section being read, the same way the sidebar does for hash links such as OpenAPI operations. Pass the links your navigation renders: it tracks the `#fragment` links that point at the current page and returns the id of the last linked section that scrolled to the top of the viewport, or `null` above the first one. Headings without a link count as part of the preceding linked section.

:::code-group
```tsx [Usage]
'use client'

import { Link, useActiveSidebarAnchor } from 'vocs'

const links = ['/api#list-pets', '/api#create-pet']

export function OperationNav() {
  const activeId = useActiveSidebarAnchor(links) // [!code focus]

  return links.map((link) => (
    <Link
      // Compare the decoded fragment: the hook returns DOM ids, such as `café` for `#caf%C3%A9`.
      aria-current={activeId !== null && decodeURIComponent(link.split('#')[1] ?? '') === activeId ? 'location' : undefined} // [!code focus]
      key={link}
      to={link}
    >
      {link.split('#')[1]}
    </Link>
  ))
}
```

```tsx [Syntax]
const activeId: string | null = useActiveSidebarAnchor(links)
```
:::