react-headings
v3.3.3TypeScript
HTML headings with auto-incrementing levels for WCAG compliance.
0/weekUpdated 11 months agoMITUnpacked: 14.0 KB
Published by Alex Nault
npm install react-headingsReact Headings
> Never worry about using the wrong heading level (h1, h2, etc.) in complex React apps!
React-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.
References:
- WCAG 2.0 technique H69
- Lighthouse SEO heading order audit
Table of contents
- Demos
- Highlights
- Installation
- Examples
- API
- Changelog
- Contributing
Demos
- Minimal
- Custom component
- Advanced structure
Highlights
- Improves SEO and accessibility
- Supports server-side rendering
- Under 1 kB minified & gzipped
- Typed with TypeScript
- Fully tested
- Works with any CSS solutions (Tailwind, CSS-in-JS, etc.)
- Plays nicely with component libraries (Material UI, etc.)
- Follows semantic versioning
Installation
``bash`
npm install react-headings
Examples
$3
`jsx
import React from "react";
import { H, Section } from "react-headings";
function App() {
return (
...
...
...
...
...
...
);
}
`
$3
Child components inherit the current level of their parent:
`jsx
import React from "react";
import { H, Section } from "react-headings";
function ParentComponent() {
return (
);
}
function ChildComponent() { ...
return (
{/ The following heading would be a in the current context
/}
);
}
`
$3
A heading can be styled like any ordinary element since it accepts all the same props:
`jsx
import React from "react";
import { H, Section } from "react-headings";
function App() {
return (
...
);
}
`
$3
A heading can be as complex as we want:
`jsx
import React from "react";
import { H, Section } from "react-headings";
import MyIcon from "./MyIcon";
function App() {
return (
}
>
...
...
...
);
}
`
$3
Leveraging
and level from the context allows the use of component libraries.
Here's an example with Material UI:`jsx
import React from "react";
import { useLevel } from "react-headings";
import { Typography } from "@material-ui/core";function MyHeading(props) {
const { Component } = useLevel();
return
}
`API
$3
Renders a
, , , , or depending on the current level.#### Props
| Name | Type | Required | Description |
| ---------- | ---------- | -------- | --------------------------------------------------------------- |
|
render | function | No | Override with a custom heading. Has precedence over children. |
| children | node | No | The content of the heading. Usually the title. |Any other props will be passed to the heading element.
#### Example
`jsx
import React from "react";
import { H } from "react-headings";function Example1() {
return This is my title ;
}
function Example2() {
return (
My h{level} } />
);
}
`$3
Creates a new section (a heading and its level).
#### Props
| Name | Type | Required | Description |
| ----------- | ------ | -------- | ------------------------------------------------------------------------------- |
|
| node | Yes | The heading component. Can be anything but best used in combination with . |
| children | node | No | The content of the new level. |#### Example
`jsx
import React from "react";
import { Section, H } from "react-headings";function Example1() {
return (
This is my title
This is my content
);
}
, , , or depending on the current level.#### Props
| Name | Type | Required | Description |
| ---------- | ---------- | -------- | --------------------------------------------------------------- |
|
render | function | No | Override with a custom heading. Has precedence over children. |
| children | node | No | The content of the heading. Usually the title. |Any other props will be passed to the heading element.
#### Example
`jsx
import React from "react";
import { H } from "react-headings";function Example1() {
return This is my title ;
}
function Example2() {
return (
My h{level} } />
);
}
`$3
Creates a new section (a heading and its level).
#### Props
| Name | Type | Required | Description |
| ----------- | ------ | -------- | ------------------------------------------------------------------------------- |
|
| node | Yes | The heading component. Can be anything but best used in combination with . |
| children | node | No | The content of the new level. |#### Example
`jsx
import React from "react";
import { Section, H } from "react-headings";function Example1() {
return (
This is my title
This is my content
);
}
, or depending on the current level.#### Props
| Name | Type | Required | Description |
| ---------- | ---------- | -------- | --------------------------------------------------------------- |
|
render | function | No | Override with a custom heading. Has precedence over children. |
| children | node | No | The content of the heading. Usually the title. |Any other props will be passed to the heading element.
#### Example
`jsx
import React from "react";
import { H } from "react-headings";function Example1() {
return This is my title ;
}
function Example2() {
return (
My h{level} } />
);
}
`$3
Creates a new section (a heading and its level).
#### Props
| Name | Type | Required | Description |
| ----------- | ------ | -------- | ------------------------------------------------------------------------------- |
|
| node | Yes | The heading component. Can be anything but best used in combination with . |
| children | node | No | The content of the new level. |#### Example
`jsx
import React from "react";
import { Section, H } from "react-headings";function Example1() {
return (
This is my title
This is my content
);
}
depending on the current level.#### Props
| Name | Type | Required | Description |
| ---------- | ---------- | -------- | --------------------------------------------------------------- |
|
render | function | No | Override with a custom heading. Has precedence over children. |
| children | node | No | The content of the heading. Usually the title. |Any other props will be passed to the heading element.
#### Example
`jsx
import React from "react";
import { H } from "react-headings";function Example1() {
return This is my title ;
}
function Example2() {
return (
My h{level} } />
);
}
`$3
Creates a new section (a heading and its level).
#### Props
| Name | Type | Required | Description |
| ----------- | ------ | -------- | ------------------------------------------------------------------------------- |
|
| node | Yes | The heading component. Can be anything but best used in combination with . |
| children | node | No | The content of the new level. |#### Example
`jsx
import React from "react";
import { Section, H } from "react-headings";function Example1() {
return (
This is my title
This is my content
);
}
function Example2() {
return (
}
>
This is my content
);
}
`
$3
Returns an object containing the current
and current Component.#### Arguments
None
#### Returns
| Name | Type | Description |
| ----------- | -------------------------------------------------------- | ------------------------------------- |
|
level | 1 \| 2 \| 3 \| 4 \| 5 \| 6 | The current level. |
| Component | "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" | The current component. Same as level. |#### Example
`jsx
import React from "react";
import { useLevel } from "react-headings";function Example(props) {
const { level, Component } = useLevel();
return This is a h{level} ;
}
``Changelog
For a list of changes and releases, see the changelog.
Contributing
Found a bug, have a question or looking to improve react-headings? Open an issue, start a discussion or submit a PR!