@vexmade/headings-react
v0.4.0
Published
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vexmade_headings-react&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vexmade_headings-react)
Downloads
22
Readme
Headings
A React package to handle a11y friendly dynamic section
/h#
generation.
Usage
import { H, Section } from '@vexmade/headings-react';
const SomeComponent = () => (
<Section>
<H>Heading</H>
<div>Some other content</div>
<Section>
<H id="custom-id" sectionLabel>Multiple Headings</H>
<H idPrefix="prefixed-" offset={1}>And multiple levels</H>
</Section>
</Section>
)
becomes
<section aria-labelledby="1">
<h1 id="1">Heading</h1>
<div>Some other content</div>
<section aria-labelledby="custom-id">
<h2 id="custom-id">Multiple Headings</h2>
<h3 id="prefixed-3">And multiple levels</h3>
</section>
</section>