React Header Element

Add condtional header logic to your App to seamlessly switch between 'Functional' header elements <h1> and decorative header classes <div class="h1"> to assist in aligning your site to WCAG guidelines for misused headers.

Why was this package created?

Accessibility for websites is now more desired than ever with growing online usage. As such, making user experiences for those who use assisted technologies better is the main reason for this package.

For more information see WCAG 2.1 AA - Headings and Labels.

What does it solve?

Simply put, it allows you to switch between a header element and a header class by specifying the criteria or via api fed from a CMS. It keeps it tidy and reduces unnecessary extra lines of code.

Basic Usage

import React from "react";
import HeaderElement from "react-header-element";

const ComponentName = () => {
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-12">
          <HeaderElement
            isFunctional={true}
            title="Hello World"
            value="h1"
            fallBack="h2"
          />
        </div>
      </div>
    </div>
  );
};

export default ComponentName;

Installation

npm install react-header-element --save

Available Props

| Name | Type | Description | | -------------- | --------- | --------------------------------------------------------------------------------- | | isFunctional | Boolean | Required. Is the element a header or a div class. | | value | String | Required. What header is it? h1 - h6 / p. | | fallBack | String | Required. The header you wish to fall back on should no value exist (h1 - h6) | | title | String | Required. The title of your header. | | className | String | Add additional classes for styling. | | id | String | Add an ID for behaviours such as anchors. | | style | String | Use inline styling should you need to dynamically add CSS. |