\n\n> Never worry about using the wrong heading level (`h1`, `h2`, etc.) in complex React apps!\n\nReact-headings maintains the proper hierarchy of headings for improved accessibility and SEO, no matter the component structure, while you keep full control of what's rendered.\n\nReferences:\n\n- [WCAG 2.0 technique H69](https://www.w3.org/TR/WCAG20-TECHS/H69.html)\n- [Lighthouse SEO heading order audit](https://web.dev/heading-order/)\n\n## Table of contents\n\n- [Demos](#demos)\n- [Highlights](#highlights)\n- [Installation](#installation)\n- [Examples](#examples)\n- [API](#api)\n- [Changelog](#changelog)\n- [Contributing](#contributing)\n\n## Demos\n\n- [Minimal](https://codesandbox.io/s/react-headings-minimal-4temt?file=/src/Demo.js)\n- [Custom component](https://codesandbox.io/s/react-headings-custom-component-l4bjb?file=/src/Demo.js)\n- [Advanced structure](https://codesandbox.io/s/react-headings-advanced-structure-uxk4p?file=/src/Demo.js)\n\n## Highlights\n\n- Improves SEO and accessibility\n- Supports server-side rendering\n- Under 1 kB minified & gzipped\n- Typed with TypeScript\n- Fully tested\n- Works with any CSS solutions (Tailwind, CSS-in-JS, etc.)\n- Plays nicely with component libraries (Material UI, etc.)\n- Follows [semantic versioning](https://semver.org/)\n\n## Installation\n\n```bash\nnpm install react-headings\n```\n\n## Examples\n\n### Basic usage\n\n```jsx\nimport React from \"react\";\nimport { H, Section } from \"react-headings\";\n\nfunction App() {\n return (\n My hx}>\n
...
\n
...
\n
...
\n My hx+1}>\n
...
\n
...
\n
...
\n \n \n );\n}\n```\n\n### Advanced structure\n\nChild components inherit the current level of their parent:\n\n```jsx\nimport React from \"react\";\nimport { H, Section } from \"react-headings\";\n\nfunction ParentComponent() {\n return (\n My hx}>\n My hx+1}>\n My hx+2}>\n \n \n \n \n );\n}\n\nfunction ChildComponent() {\n return (\n My hy}>\n {/* The following heading would be a
in the current context */}\n My hy+1}>\n
...
\n \n
\n );\n}\n```\n\n### Styling\n\nA heading can be styled like any ordinary `` element since it accepts all the same props:\n\n```jsx\nimport React from \"react\";\nimport { H, Section } from \"react-headings\";\n\nfunction App() {\n return (\n My hx}>\n ...\n \n );\n}\n```\n\n### Custom heading\n\nA heading can be as complex as we want:\n\n```jsx\nimport React from \"react\";\nimport { H, Section } from \"react-headings\";\nimport MyIcon from \"./MyIcon\";\n\nfunction App() {\n return (\n \n \n My hx\n \n }\n >\n
...
\n
...
\n
...
\n \n );\n}\n```\n\n### Using component libraries\n\nLeveraging `Component` and `level` from the context allows the use of component libraries.\nHere's an example with [Material UI](https://material-ui.com/api/typography/):\n\n```jsx\nimport React from \"react\";\nimport { useLevel } from \"react-headings\";\nimport { Typography } from \"@material-ui/core\";\n\nfunction MyHeading(props) {\n const { Component } = useLevel();\n\n return ;\n}\n```\n\n## API\n\n### `` component\n\nRenders a `
`, `
`, `
`, `
`, `
` or `
` depending on the current level.\n\n#### Props\n\n| Name | Type | Required | Description |\n| ---------- | ---------- | -------- | --------------------------------------------------------------- |\n| `render` | `function` | No | Override with a custom heading. Has precedence over `children`. |\n| `children` | `node` | No | The content of the heading. Usually the title. |\n\nAny other props will be passed to the heading element.\n\n#### Example\n\n```jsx\nimport React from \"react\";\nimport { H } from \"react-headings\";\n\nfunction Example1() {\n return This is my title;\n}\n\nfunction Example2() {\n return (\n My h{level}} />\n );\n}\n```\n\n### `` component\n\nCreates a new section (a heading and its level).\n\n#### Props\n\n| Name | Type | Required | Description |\n| ----------- | ------ | -------- | ------------------------------------------------------------------------------- |\n| `component` | `node` | Yes | The heading component. Can be anything but best used in combination with ``. |\n| `children` | `node` | No | The content of the new level. |\n\n#### Example\n\n```jsx\nimport React from \"react\";\nimport { Section, H } from \"react-headings\";\n\nfunction Example1() {\n return (\n This is my title}>\n This is my content\n \n );\n}\n\nfunction Example2() {\n return (\n \n
\n This is my title\n
\n \n }\n >\n This is my content\n \n );\n}\n```\n\n### `useLevel` hook\n\nReturns an object containing the current `level` and current `Component`.\n\n#### Arguments\n\nNone\n\n#### Returns\n\n| Name | Type | Description |\n| ----------- | -------------------------------------------------------- | ------------------------------------- |\n| `level` | `1` \\| `2` \\| `3` \\| `4` \\| `5` \\| `6` | The current level. |\n| `Component` | `\"h1\"` \\| `\"h2\"` \\| `\"h3\"` \\| `\"h4\"` \\| `\"h5\"` \\| `\"h6\"` | The current component. Same as level. |\n\n#### Example\n\n```jsx\nimport React from \"react\";\nimport { useLevel } from \"react-headings\";\n\nfunction Example(props) {\n const { level, Component } = useLevel();\n\n return This is a h{level};\n}\n```\n\n## Changelog\n\nFor a list of changes and releases, see the [changelog](https://github.com/alexnault/react-headings/releases).\n\n## Contributing\n\nFound a bug, have a question or looking to improve react-headings? Open an [issue](https://github.com/alexnault/react-headings/issues/new), start a [discussion](https://github.com/alexnault/react-headings/discussions/new) or submit a [PR](https://github.com/alexnault/react-headings/fork)!\n","readmeFilename":"README.md"}
![\"\"](\"https://img.shields.io/github/actions/workflow/status/alexnault/react-headings/ci-and-publish.yml?branch=master&style=for-the-badge\")
\n \n \n ![\"\"](\"https://img.shields.io/npm/v/react-headings?style=for-the-badge\")
\n \n \n ![\"\"](\"https://img.shields.io/bundlephobia/minzip/react-headings?style=for-the-badge\")
\n \n \n ![\"\"](\"https://img.shields.io/npm/dm/react-headings?style=for-the-badge\")
\n \n