Accessible Footnotes In React – a11y-footnotes

A fully accessible footnotes and footnote reference implemented in React.

How to use it:

1. Install and import the component.

# Yarn
$ yarn add react-a11y-footnotes

# NPM
$ npm i react-a11y-footnotes --save
// Import the components
import { FootnotesProvider, FootnoteRef, Footnotes } from 'react-a11y-footnotes'
// Import styles
import 'react-a11y-footnotes/dist/styles.css'

2. Basic usage.

const YourComponent = props => {
  return (
    <FootnotesProvider>
      <p>
        Maintaining{' '}
        <Ref description='Footnotes are notes placed at the bottom of a page. They cite references or comment on a designated part of the text above it.'>
          footnotes
        </Ref>{' '}
        manually can be a pain. By using{' '}
        <Ref description='Cascading Style Sheets'>CSS</Ref>{' '}
        <Ref
          id='with-a-custom-id'
          description={
            <>
              <a
                href='https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters'
                target='_blank'
                rel='noopener noreferrer'
              >
                CSS counters
              </a>{' '}
              are, in essence, variables maintained by CSS whose values may be
              incremented by CSS rules to track how many times they’re used.
            </>
          }
        >
          counters
        </Ref>{' '}
        to add the numbered references in the text and an ordered list to
        display the actual footnotes in the footer, it becomes extremely easy.
      </p>
      <Footnotes label='Footnotes' backLabel='Back to content' />
    </FootnotesProvider>
  )
}

Preview:

Accessible Footnotes In React - a11y-footnotes

Download Details:

Author: HugoGiraudel

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/HugoGiraudel/react-a11y-footnotes

License: MIT

You Might Be Interested In:

Add Comment