react-modal-pirate

A react-modal wrapper that makes it (even) easier to create a modal.

Why "-pirate" ?

Because its just like react-modal, but with hooks.

Install

yarn add react-modal-pirate

or

npm install --save react-modal-pirate

Usage

1. Wrap your application with

import ModalProvider from "react-modal-pirate"

const App = () => {
  return (
    <ModalProvider>
      <Main/>
    </ModalProvider>
  )
}

2. Create the modal content

import {useClose} from "react-modal-pirate"

const Modal = () => {
  const closeModal = useClose();

  return (
    <div>
      <h1>Hello World</h1>
      <button onClick={closeModal}>Exit</button>
    </div>
  )
}

Note: Modals also close by pressing the Esc key or by clicking outside the modal itself, so it is not mandatory to use the useClose hook.

3. Open the modal using useOpen hook

import { useOpen } from "react-modal-pirate"
import Modal from "./Modal"

const Main = () => {
  const openModal = useOpen()

  return (
    <button onClick={() => openModal(<Modal/>)}>Open Modal</button>
  )
}

See the full documentation

License

MIT © alexnix