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 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 (
        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.'>
        </Ref>{' '}
        manually can be a pain. By using{' '}
        <Ref description='Cascading Style Sheets'>CSS</Ref>{' '}
                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.
        </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.
      <Footnotes label='Footnotes' backLabel='Back to content' />


Accessible Footnotes In React - a11y-footnotes

Download Details:

Author: HugoGiraudel

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

You Might Be Interested In:

Add Comment