A React component that shows a live document outline.
The outline always updates itself in sync with the current document. This also works with hot module replacement.
Legend:
- Italic element name - Denotes an implicit subsection. This only happens for heading elements (
<h1>
etc.) - Bold + underlined ARIA label - Denotes an ARIA landmark.
- Shaded area - Denotes content inside the
<main>
element.
To add to your project:
npm install --save @blizzy/react-outline
Somewhere in your app, you can use this to show the current page's outline:
import { Outline } from '@blizzy/react-outline'
Insert the following at the bottom of your HTML:
<div className="fixed right-5 top-5 max-h-[50%] max-w-[50%] overflow-y-scroll
rounded-lg bg-white p-5 shadow-md dark:bg-slate-700">
<Outline />
</div>
react-outline uses Tailwind CSS for styling. If you use Tailwind CSS as well, you may want to add
react-outline's source to your content
configuration:
module.exports = {
content: [
// ...
'./node_modules/@blizzy/react-outline/dist/**',
],
}
react-outline is licensed under the MIT license.