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. |