open-index/open-npm huggingface dataset:
npm package: @jenwachter/react-accessible-modal
Description: A React component that creates an accessible modal.
Latest version: 0.1.0

# React Accessible Modal

A React component that creates an accessible modal.

## What does it do?

* Attaches the modal to the top-level of the `<body>` element and hides all other top-level elements via the `aria-hidden` attribute.
* Traps the user's keyboard focus within the modal. The user can close modal using either the close button or the Escape key.

## Usage example

```javascript
import React, { useState } from 'react';
import Modal from '@jenwachter/react-accessible-modal';

export default () => {

  const [open, setOpen] = useState(null);

  return (
    <>
      <button onClick={() => setOpen(!open)}>Open</button>
      <Modal isOpen={open} onClose={() => setOpen(false)}>
        <p>this is the contents of the modal</p>
      </Modal>
    </>
  );
};
```

## Modal props

* `containerClasses`: array of classes to apply to the modal container. Default: `['modal-container']`
* `contentClasses`: array of classes to apply to the modal content container. Default: `['modal-content']`
* `isOpen`: boolean describing if the modal is open (true) or closed (false). Default: `false`
* `onClose`: callback to run when the modal is closed. Default: none