react-heading-section

``sh
npm i --save @team-griffin/react-heading-section

yarn add @team-griffin/react-heading-section
`

This package's job is to automatically determine the depth of an H.
This is super useful if you have written a reusable component that could be rendered anywhere in the tree that should have an H in it.

Usage

`javascript
import { HeadingRoot, HeadingSection, Heading, H } from '@team-griffin/react-heading-section';

return (




`

$3

Heading root's job is to setup the initial depth for the rest of the heading's down the tree.
It's inital depth is 0, as each descendant heading section increments from it.

Has no props.

$3

Heading section's job is to create a new scope. Any rendered as a descedant of a will automatically know the scope / depth.

Heading sections can be as descendants of other heading sections. This will increment the depth even further.

`
HeadingRoot
-- HeadingSection
---- Heading (h1)
---- HeadingSection
------ Heading (h2)
---- Heading (h1)
---- HeadingSection
------ Heading (h2)
`

Has no props.

$3

Heading will get the current depth / scope and render a given component and pass along that depth.

`javascript
(
{
console.log(props.depth);
}}>
)
`

Props:

- Component = (string / Element / Component Constructor)

$3

H is a utility component which will take a depth and spit out a an h(1-6).

This component passes through any other props you pass to it.

`javascript
(

My Title

)

// -->


My Title

`javascript
(
depth={5}
h1={()}
h2={()}
h3={()}
h4={()}
h5={()}
h6={()}
/>
)
``

Props:

- Depth
- h1-h6