@vexmade/headings-react v0.4.0

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>