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!