0.5.0-alpha.8 • Published 2 years ago
@dullaghan/heading-tag v0.5.0-alpha.8
@dullaghan/heading-tag
A simple component for handling h1
-> h6
dynamically.
Usage
The idea behind this heading is to abstract the general heading level for a component so it can be used in any context. To populate this level, you could have your component accept a prop that can be overidden by some parent context.
import HeadingTag from '@dullaghan/heading-tag';
const MyComponent = ({ headingLevel = 2 }) => (
<div>
<HeadingTag level={headingLevel}>My heading</HeadingTag>
...
</div>
);
You can also abstract sub-headings within the same component by using the offset
prop.
import HeadingTag from '@dullaghan/heading-tag';
const MyComponent = ({ headingLevel = 2 }) => (
<div>
<HeadingTag level={headingLevel}>My main heading</HeadingTag>
...
<HeadingTag level={headingLevel} offset={1}>
My sub-heading
</HeadingTag>
</div>
);
0.5.0-alpha.6
2 years ago
0.5.0-alpha.4
2 years ago
0.5.0-alpha.8
2 years ago
0.4.4
2 years ago
0.4.7
2 years ago
0.4.2
2 years ago
0.4.0
2 years ago
0.3.0
2 years ago
0.2.0
2 years ago
0.1.7
2 years ago
0.1.6
2 years ago