react-modal-stack

A simple, flexible, zero-dependency modal stack manager for React.

Live Demo

Install

npm install @mattjennings/react-modal-stack

Usage

Add <ModalStack /> to the root of your App

import React from 'react'
import { ModalStack } from '@mattjennings/react-modal-stack'
import App from './App'

React.render(
  <ModalStack>
    <App />
  </ModalStack>,
  document.querySelector('#root')
)

Create a Modal component. It doesn't matter how you style it, it just needs to receive an open prop.

import React from 'react'
import { useModals } from '@mattjennings/react-modal-stack'

function Modal({ open, title, message }) {
  const { closeModal } = useModals()

  if (!open) {
    return null
  }

  return (
    <div
      style={{
        zIndex: 100,
        position: `fixed`,
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        display: `flex`,
        justifyContent: `center`,
        alignItems: 'center',
      }}
    >
      <div
        style={{
          width: 400,
          height: 200,
          padding: '0 16px',
          borderRadius: '10px',
          background: 'white',
          border: '1px solid #e5e5e5',
          boxShadow:
            '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
        }}
      >
        <h2>{title}</h2>
        <p>{message}</p>
        <button
          onClick={() => {
            closeModal()
          }}
        >
          Close
        </button>
      </div>
    </div>
  )
}

Open the modal

import React from 'react'
import { useModals } from '@mattjennings/react-modal-stack'
import Modal from './Modal'

function OpenModal() {
  const { openModal } = useModals()

  return (
    <button
      onClick={() => {
        openModal(Modal, {
          title: 'Hello',
          message: 'This is your modal',
        })
      }}
    >
      Open Modal
    </button>
  )
}

Animating

ModalStack provides a renderModals prop to take control of rendering the modals. This lets you use a library like framer-motion to animate your transitions between modals.

See the framer-motion example to see how it works.

API

<ModalStack />

| Props | Type | Description | | ------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------- | | renderModals | ({ stack }) => React.ReactNode | If you want to take control on how the modals are rendered (eg. adding animations), you can do so here. |

useModals()

| Method | Description | | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | openModal(component, props, options?: { replace }) | Opens the component provided as the modal. If replace: true is provided for options, it will dismiss & replace the currently displayed modal in the stack. | | closeModal | Dismisses the current modal | | closeModals(amount) | Dismisses the amount of modals off the stack | | closeAllModals() | Dismisses all modals | | stack | The current stack of modals |