Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/team-griffin/react-heading-section
Automagically determine header depths
https://github.com/team-griffin/react-heading-section
automagic headings react
Last synced: about 1 month ago
JSON representation
Automagically determine header depths
- Host: GitHub
- URL: https://github.com/team-griffin/react-heading-section
- Owner: team-griffin
- License: mit
- Created: 2017-03-30T10:58:31.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T20:28:44.000Z (about 2 years ago)
- Last Synced: 2024-08-09T10:02:31.089Z (5 months ago)
- Topics: automagic, headings, react
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@team-griffin/react-heading-section
- Size: 3.06 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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 (
This is an h1
)}
/>
This is an h2
)}
/>
);
// -->
This is an h1
This is an h2
```
### Heading Root
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.
### Heading Section
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.
### Heading
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)
### H
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
```
Props:
- Depth
### Heading Matrix
Heading matrix will allow you yo specify what you want to render at a given depth.
But... if one isn't provided it will look up the closest (going up).
```javascript
(
)}
h2={()}
h3={()}
h4={()}
h5={()}
h6={()}
/>
)
```
Props:
- Depth
- h1-h6