React Heading Levels

Provides components that calculate the correct HTML heading levels for you.

Getting started

Install with NPM:

``bash
npm install --save @jfrk/react-heading-levels
`

or Yarn:

`bash
yarn add @jfrk/react-heading-levels
`

How to use

Wrap your app in and then use the component instead of

,

,

etc. Wrap components in the

component to increase the heading level for all contained components.

Example:

`js
import React from 'react';
import { HeadingLevelProvider, H, Section } from '@jfrk/react-heading-levels';

export default function App() {
return (



Heading 1

Heading 2
Heading 2

Heading 3
Heading 3

Heading 2



);
}
`

Resulting DOM structure:

`html


Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 2


``