react-a11y-dialog is a thin React component to ease the use of accessible footnotes in React applications. This implementation is heavily inspired by Accessible footnotes with CSS.

Find a complete demo on CodeSandbox.

• Install
• Terminology
• Usage
• API
  • FootnotesProvider
  • FootnoteRef
  • Footnotes
• Styling
  • Using base styles
    • With a bundler
    • Without a bundler
  • Customisation
    • With CSS
    • With CSS-in-JS
• ID generation
• Example

npm install react-a11y-footnotes

• Footnotes: the additional information present at the bottom of a content area using footnote references.
• Footnote reference: a text segment offering more information in the footnotes.

The library exports 3 parts, all necessary to make everything work correctly:

• FootnotesProvider: a component with no HTML footprint, that needs to wrap the content part of your application.
• FootnoteRef: an inline component wrapping a footnote reference, rendering an anchor link (<a>) to the correct footnote in the footer.
• Footnotes: a component rendering the actual footnotes, usually placed at the end of the content area.