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
• Usage
• Docs
• Demos
• Accessibility
• License

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>;

Docs 🤓

For detailed documentation there is this page with everything you need to know.

Demos 💡

• Basic Modal
• Modal with Header, Body and Footer
• Unstyled Modal
• Nested Modal
• Confirmation Modal (custom)
• Sign-in Modal (custom)

Accessibility ♿️

react-a11y-modal was designed to follow the W3C Specification.

License 🔓

MIT © pixelmanya