react-autoheader

Automatically sets h1, h2 levels based on component nesting.

Installation

Via npm:

$ npm install --save react-autoheader

Usage

// Input
import { Header, Section } from 'react-autoheader';
 
export const Example = () => (
    <Section>
        <Header>Top level</Header>
        <Section>
            <Header>Middle level</Header>
            <Section>
                <Header>Bottom level</Header>
            </Section>
            <Header>Middle level</Header>
        </Section>
        <Header>Top level</Header>
    </Section>;
);

// Output
<h1>Top level</h1>
<h2>Middle level</h2>
<h3>Bottom level</h3>
<h2>Middle level</h2>
<h1>Top level</h1>

Props

Section

Property	Type	Default	Description
level	Number	undefined	Resets the heading level for child components.