Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including semantic-headings with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("prop-types/package.json"); // prop-types is a peer dependency. var semanticHeadings = require("semantic-headings")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

semantic-headings v1.0.4

A React utility for dynamically generating headings with the correct semantic order.

semantic-headings

A React utility for dynamically generating headings with the correct semantic order.

Getting started

This library exports two react components (H and SemanticSection) that use the Context API to dynamically generate and maintain heading levels based on nested sections.

import { H, SemanticSection } from 'semantic-headings';

// renders <h1>Hello World</h1>
<H>Hello World</H> 

// renders <h2>Hello World</h2>
<SemanticSection> 
  <H>Hello World</H> 
</SemanticSection>

// renders an h1, h2, and h3
<H>Hello World</H>
<SemanticSection> 
  <H>Hello World</H>
  <SemanticSection> 
    <H>Hello World</H> 
  </SemanticSection>
</SemanticSection>

Advanced usage

Section Elements

By default the SemanticSection component does not render it's own element to the DOM. However a react component or element can be passed to SemanticSection using its element prop. Any additional props and refs passed to the component will be forwarded to that element.

<SemanticSection element="div"> 
  <H>Hello World</H> 
</SemanticSection>

// renders 
<div>
  <h2>Hello World</h2>
</div>

Override Level

If you want to override the automatically generated level. You can do so using the level prop.

<H level={6}>Hello World</H> // <h6>Hello World</h6>

Credit

The approached used in this library was inspired by @Heydon's medium post.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free