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. |