Description:
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:
