https://github.com/shwilliam/react-modal-wrap
🌯 Accessible, style-agnostic modal components
https://github.com/shwilliam/react-modal-wrap
dialog modal react w3c wai-aria
Last synced: 6 months ago
JSON representation
🌯 Accessible, style-agnostic modal components
- Host: GitHub
- URL: https://github.com/shwilliam/react-modal-wrap
- Owner: shwilliam
- License: mit
- Created: 2020-01-31T11:37:19.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-02-13T00:08:11.000Z (over 3 years ago)
- Last Synced: 2024-12-30T15:03:20.272Z (9 months ago)
- Topics: dialog, modal, react, w3c, wai-aria
- Language: TypeScript
- Homepage:
- Size: 293 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-modal-wrap
This component is based on the WAI-ARIA Authoring Practices's [modal dialog pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal), which describes that a modal should:
- Disable interaction outside itself
- Trap tab navigation
- Close modal on attempt to interact outside modal
- Disable scroll on body
## Installation
```shell
$ npm i react-modal-wrap
```
## Usage
```js
import React from 'react'
import {Modal, ModalWrapper, useModal} from 'react-modal-wrap'
const ModalCloseButton = ({children}) => {
const {close} = useModal()
return {children}
}
const ModalOpenButton = ({children}) => {
const {open} = useModal()
return {children}
}
const App = () => (
open
Hello from modal
close
)
export default App
```
## Components
### ``
A context wrapper that handles checkbox state changes. Must wrap `` and ``.
#### Props
| Name | Type | Required | Default | Description |
| ------------------ | ------- | :------: | ------- | ------------------------------------------------------------------------- |
| `overlay` | boolean | ❌ | `false` | Whether to render a wrapper around the modal styled to fill the document. |
| `closeOnClickAway` | boolean | ❌ | `true` | Whether the modal should close when click detected outside of container. |
| `closeOnEsc` | boolean | ❌ | `true` | Whether the modal should close on escape keypress. |
| `lockScroll` | boolean | ❌ | `true` | Whether to disable scroll when modal is open. |
## Hooks
### `useModal`
Returns an object with the following functions to control the modal:
| Name | Type | Return type | Description |
| -------- | -------- | :---------: | ------------------------------------------------------------------------------ |
| `open` | function | void | Opens the modal. |
| `close` | function | void | Closes the modal. |
| `toggle` | function | boolean | Toggles the modal and returns a boolean representing if the the modal is open. |
## Contributing
This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the [issues](https://github.com/shwilliam/react-modal-wrap/issues). If you wish to work on this project:
1. Fork [this project](https://github.com/shwilliam/react-modal-wrap)
2. Create a branch (`git checkout -b new-branch`)
3. Commit your changes (`git commit -am 'add new feature'`)
4. Push to the branch (`git push origin new-branch`)
5. [Submit a pull request!](https://github.com/shwilliam/react-modal-wrap/pull/new/master)