Skip to content

AliKdhim87/pretty-modal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

74 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.