Pretty modal

---

• TypeScript support
• Build with styled-components
• Light weight
• Custom styles
• CSS variables
• Accessibility
• FocusTrap
• Portal

Installing

npm install pretty-modal

or

yarn add pretty-modal

Note: below version 3 use default import import Modal from 'pretty-modal'

Basic Example

import React from 'react'
import {Modal} from 'pretty-modal'

const App = () => {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <div className="App">
      <button
        onClick={() => {
          setIsOpen(true)
        }}
      >
        Open Modal
      </button>
      <Modal
        onClose={() => {
          setIsOpen(false)
        }}
        open={isOpen}
      >
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
        <button
          onClick={() => {
            setIsOpen(false)
          }}
        >
          Close
        </button>
      </Modal>
    </div>
  )
}

export default App

CSS Variables

You can use the CSS variables for custom Style

--pretty-modal-backdrop-background-color: rgba(0, 0, 0, 0.5);
--pretty-modal-backdrop-backdrop-filter: blur(1px);
--pretty-modal-backdrop-transition: all 100ms;
--pretty-modal-backdrop-transition-delay: 200ms;
--pretty-modal-backdrop-display: flex;
--pretty-modal-backdrop-align-items: center;
--pretty-modal-backdrop-justify-content: center;
--pretty-modal-backdrop-padding: 30px 0;

--pretty-modal-modal-container-transform: translateY(-10rem);
--pretty-modal-modal-container-transition: all 200ms;
--pretty-modal-modal-container-padding: 20px;
--pretty-modal-modal-container-min-height: 50px;
--pretty-modal-modal-container-min-width: 50px;
--pretty-modal-modal-container-max-width: 80%;
--pretty-modal-modal-container-max-height: 100%;
--pretty-modal-modal-container-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
--pretty-modal-modal-container-background-color: #fff;
--pretty-modal-modal-container-border-radius: 2px;

--pretty-modal-active-transition-duration: 250ms;
--pretty-modal-active-transition-delay: 0ms;

--pretty-modal-active-modal-container-transform: translateX(0);
--pretty-modal-active-modal-container-transition-delay: 150ms;
--pretty-modal-active-modal-container-transition-duration: 350ms;

Custom styles Example

import React from 'react'
import {Modal} from 'pretty-modal'

import './App.css'

const App = () => {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <div className="App">
      <button
        onClick={() => {
          setIsOpen(true)
        }}
      >
        Open Modal
      </button>
      <Modal
        onClose={() => {
          setIsOpen(false)
        }}
        open={isOpen}
      >
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium porro deleniti velit
        </p>
        <button
          onClick={() => {
            setIsOpen(false)
          }}
        >
          Close
        </button>
      </Modal>
    </div>
  )
}

export default App

App.css

:root {
  --pretty-modal-backdrop-background-color: ; /* any color you like */
}

locked Modal example

import React, {useState} from 'react'
import {Modal} from 'pretty-modal'

const App = () => {
  const [isLocked, setIsLocked] = useState(true)
  const [isLockedOpen, setIsLockedOpen] = useState(false)

  return (
    <div>
      <button
        onClick={() => {
          setIsLockedOpen(true)
        }}
      >
        Open Locked Modal
      </button>
      <Modal
        locked={isLocked}
        onClose={() => {
          setIsLockedOpen(false)
          setIsLocked(true)
        }}
        open={isLockedOpen}
      >
        <p>s no escaping me.</p>
        <p>Once unlocked clicking outside or pressing esc will close me.</p>
        <p>
          <button
            onClick={() => {
              setIsLocked(!isLocked)
            }}
          >
            {isLocked ? 'Unlock' : 'Lock'}
          </button>
        </p>
      </Modal>
    </div>
  )
}

export default App

Accessibility

<Modal
  ariaLabelledby="modal1_label"
  ariaDescribedby="modal1_desc"
  onClose={() => {
    setIsOpen(false)
  }}
  open={isOpen}
>
  <h1 id="modal1_label">Your modal title</h1>
  <p id="modal1_desc">Your modal Description</p>
  <button
    onClick={() => {
      setIsOpen(false)
    }}
  >
    Close
  </button>
</Modal>

Portal

Use <Portal/> separately

import {Portal} from 'pretty-modal'
;<Portal>Hello, World</Portal>

Props

Name	Type	Default	Description
children	React.ReactNode	undefined	Where you can add the modal elements
open	boolean	false	When it's true it will open the modal
onClose	() => void	undefined	Callback fired when the Modal is requested to be closed by a click on the overlay or when user press esc key
locked	boolean	false	When it's true it will prevent close the modal when you click on the backdrop of the close button
parent	string	document.body	You can specify the parent of the modal where you can render it.
parentClass	string	__pretty-modal__	You change the parent dev className
ariaLabelledby	string	undefined	Gives the dialog an accessible name by referring to the element that provides the dialog title
ariaDescribedby	string	undefined	Gives the dialog an accessible description by referring to the dialog content that describes the primary message or purpose of the dialog.
initialFocus	string or false	undefined	By default, when a focus trap is activated the first element in the focus trap's tab order will receive focus. With this option you can specify a different element to receive that initial focus, or use false for no initially focused element at all.