/react-heading-levels

Provides components that calculate the correct HTML heading levels for you

Primary LanguageJavaScript

React Heading Levels

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

Getting started

Install with NPM:

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

or Yarn:

yarn add @jfrk/react-heading-levels

How to use

Wrap your app in <HeadingLevelProvider> and then use the <H> component instead of <h1>, <h2>, <h3> etc. Wrap components in the <Section> component to increase the heading level for all contained <H> components.

Example:

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

export default function App() {
  return (
    <HeadingLevelProvider>
      <main className="App">
        <H>Heading 1</H>
        <Section>
          <H>Heading 2</H>
          <H>Heading 2</H>
          <Section>
            <H>Heading 3</H>
            <H>Heading 3</H>
          </Section>
          <H>Heading 2</H>
        </Section>
      </main>
    </HeadingLevelProvider>
  );
}

Resulting DOM structure:

<main>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h3>Heading 3</h3>
  <h2>Heading 2</h2>
</main>