react-header-element

A simple way for defining functional header tags and decorative class headers

Usage no npm install needed!

<script type="module">
  import reactHeaderElement from 'https://cdn.skypack.dev/react-header-element';
</script>

README

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.