react-modal-hook

React hook for showing modal windows

Install

npm install --save react-modal-hook

Usage

Use ModalProvider to provide modal context to your application components:

import React from "react";
import ReactDOM from "react-dom";
import { ModalProvider } from "react-modal-hook";
import App from "./App";

ReactDOM.render(
  <ModalProvider>
    <App />
  </ModalProvider>,
  document.getElementById("root")
);

Call useModal in your functional component:

import React from "react";
import { useModal } from "react-modal-hook";

const App = () => {
  const [showModal, hideModal] = useModal(() => (
    <div role="dialog" className="modal">
      <p>This is a modal window</p>
      <button onClick={hideModal}>Close</button>
    </div>
  ));

  return <button onClick={showModal}>Show modal</button>;
};

License

MIT © mpontus