React-a11y-modal NPM

react-a11y-modal

An accessible & customizable modal dialog for React built with Hooks under the hood. It provides developers a decent-looking modal which they can use right away without worrying much about styling. However, if you need custom styles it's of course possible.

Contents 📖

Installation ⚒

Use either npm or yarn:

npm install --save react-a11y-modal
yarn add react-a11y-modal

Usage 🤔

There are plenty of props available, which you can pass to <Modal.Container />.

Basic modal

import { Modal } from 'react-a11y-modal';

<Modal.Container>
  <h1>Title</h1>
  <button>Close</button>
</Modal.Container>;

Header, Body and Footer

import { Modal } from 'react-a11y-modal';

<Modal.Container>
  <Modal.Header>
    <h1>Title</h1>
    <button>Close</button>
  </Modal.Header>
  <Modal.Body>
    <p>Body</p>
  </Modal.Body>
  <Modal.Footer>
    <button>Footer button</button>
  </Modal.Footer>
</Modal.Container>;