dan1elhughes/react-autoheader

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.