react-modal-wrap

This component is based on the WAI-ARIA Authoring Practices's modal dialog pattern, 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

$ npm i react-modal-wrap

Usage

import React from 'react'
import {Modal, ModalWrapper, useModal} from 'react-modal-wrap'

const ModalCloseButton = ({children}) => {
  const {close} = useModal()
  return <button onClick={close}>{children}</button>
}

const ModalOpenButton = ({children}) => {
  const {open} = useModal()
  return <button onClick={open}>{children}</button>
}

const App = () => (
  <ModalWrapper>
    <ModalOpenButton>open</ModalOpenButton>

    <Modal>
      <p>Hello from modal</p>

      <ModalCloseButton>close</ModalCloseButton>
    </Modal>
  </ModalWrapper>
)

export default App

Components

<Modal />

A context wrapper that handles checkbox state changes. Must wrap <TriStateCheckbox /> and <Checkbox />.

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. If you wish to work on this project:

1. Fork this project
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!