react-modal-wrap v0.1.3

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

Hooks

useModal

Returns an object with the following functions to control the modal:

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!