Usage
Builds outline items from the headings already in the page. Use it when the article is not a Markdown string, and pass the items to Outline. The list updates when headings are added, removed, renamed, or given a new id. A null ref returns an empty list.
ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Put an id on every heading the outline should list. A heading with no id, or with no text, is omitted. |
| Do | Point the ref at the article, not the page, so headings outside the article stay out of the outline. |
| Don't | Expect the hook to invent ids. It only reads the ids the headings already have. |
| Don't | Use it for a Markdown string. useOutlineFromMarkdown follows the same parser and slugs as Markdown. |
Parameters
| Param | Type | Description |
|---|---|---|
containerRefrequired | React.RefObject<HTMLElement | null> | The element that holds the headings. The hook reads h1 through h6 inside it. |
Returns
| Field | Type | Description |
|---|---|---|
| items | [] | One item per heading that has both an id and text, in document order, ready for Outline's items prop. id is the heading's id, label is its trimmed text, and level is its depth from 1 to 6. |
Examples
Common configurations, variations, and states.An article of headings and an Outline built from those headings through useOutlineFromDOM. "Add section" appends a heading, and a new entry that links to it appears in the outline.
Use with shadcn
Already using the shadcn registry workflow? Install the real Astryx package and a local public re-export. Component implementation source stays in Astryx.
This install URL expires with the draft preview.bash