react-customable-modal v1.0.0

react-customable-modal

Library that can be used to display modal in react

Install

npm install --save react-customable-modal

yarn add react-customable-modal

Usage

import React, { FC, useMemo } from 'react'
import {
  ModalPortal,
  ModalProvider,
  useModal,
  useModalRef,
  ModalProps
} from 'react-customable-modal'
import './style.css'

const App = () => {
  const aRef = useModalRef()
  const bRef = useModalRef()
  const container = useMemo(
    () => document.getElementById('modal') || document.body,
    []
  )

  return (
    <ModalProvider
      defaultContainer={container}
      closeOnClickOutside
      disableScroll
      defaultAnimation={{
        in: { duration: 0.2, type: { xPercent: 0, yPercent: 30 } },
        out: { duration: 0.2, type: { xPercent: 0, yPercent: -30 } }
      }}
    >
      <h1>This is react-customable-modal example</h1>
      <p>Press button on below to open modal</p>
      <button
        onClick={(e) => {
          e.stopPropagation()
          aRef.current?.open()
        }}
      >
        open modal
      </button>
      <ModalPortal ref={aRef} children={ModalA} />
      <ModalPortal ref={bRef} name='ModalB' children={ModalB} />
    </ModalProvider>
  )
}

const ModalA: FC<ModalProps> = ({ close }) => {
  const { openModal } = useModal()

  return (
    <div className='container'>
      <h1>this is ModalA</h1>
      <div>hello modal!</div>
      <button onClick={close}>close modal</button>
      <button
        onClick={(e) => {
          e.stopPropagation()
          e.preventDefault()
          openModal('ModalB')
        }}
      >
        open ModalB
      </button>
    </div>
  )
}

const ModalB: FC<ModalProps> = ({ close }) => {
  const { closeAll } = useModal()

  return (
    <div className='container'>
      <h1>this is ModalB</h1>
      <div>
        hello modal!
        <span role='img' aria-label='emoji'>
          🎉
        </span>
      </div>
      <button onClick={close}>close modal</button>
      <button onClick={closeAll}>close all modal</button>
    </div>
  )
}

export default App

License

MIT © KJG04