react-modal-hook

Syntactic sugar for handling modal windows using React Hooks.

This library does not provide any UI, but instead offers a convenient way to render modal components defined elsewhere.

For a simple modal component check out react-modal, which works well with this library.

Demo (Material-UI)

Table of Contents

• Install
• Usage
  • Updating Modals
  • Animated Modals
• License

Install

bashCopy
npm install --save react-modal-hook

Usage

Use ModalProvider to provide modal context for your application:

jsxCopy
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 with the dialog component of your choice. Example using react-modal:

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

const App = () => {
  const [showModal, hideModal] = useModal(() => (
    <ReactModal isOpen>
      <p>Modal content</p>
      <button onClick={hideModal}>Hide modal</button>
    </ReactModal>
  ));

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

Updating Modals

Second argument to useModals should contain an array of values referenced inside the modal:

jsxCopy
const App = () => {
  const [count, setCount] = useState(0);
  const [showModal] = useModal(
    () => (
      <ReactModal isOpen>
        <span>The count is {count}</span>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </ReactModal>
    ),
    [count]
  );

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

Modals are also functional components and can use react hooks themselves:

jsxCopy
const App = () => {
  const [showModal] = useModal(() => {
    const [count, setCount] = useState(0);

    return (
      <ReactModal isOpen>
        <span>The count is {count}</span>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </ReactModal>
    );
  });

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

Animated Modals

Use TransitionGroup as the container for the modals:

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

ReactDOM.render(
  <ModalProvider rootComponent={TransitionGroup}>
    <App />
  </ModalProvider>,
  document.getElementById("root")
);

When TransitionGroup detects of one of its children removed, it will set its in prop to false and wait for onExited callback to be called before removing it from the DOM.

Those props are automatically added to all components passed to useModal. You can can pass them down to CSSTransition or modal component with transition support.

Here's an example using Material-UI's Dialog:

jsxCopy
import React from "react";
import { useModal } from "react-modal-hook";
import { Button, Dialog, DialogActions, DialogTitle } from "@material-ui/core";

const App = () => {
  const [showModal, hideModal] = useModal(({ in: open, onExited }) => (
    <Dialog open={open} onExited={onExited} onClose={hideModal}>
      <DialogTitle>Dialog Content</DialogTitle>
      <DialogActions>
        <Button onClick={hideModal}>Close</Button>
      </DialogActions>
    </Dialog>
  ));

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

License

MIT © mpontus