@thanhdungttrd172/react-multi-popup

react-multi-popup

Multi popup

• Definition in one file and callable anywhere
• Multiple overlapping popups, no limit

Install

npm install --save @thanhdungttrd172/react-multi-popup

Usage

import React from 'react'
import { ExampleComponent, MultiPopupArea, useMultiPopup } from '@thanhdungttrd172/react-multi-popup'
import '@thanhdungttrd172/dist/index.css'
import TestPopup from './TestPopup'

const App = () => {
  const { open: openPopup } = useMultiPopup()
  // Declare your popup here
  const popupConfig = {
    "TEST": TestPopup,
    "TEST2": TestPopup,
    // add more
  }
  // Option config for popup
  const popupOption = {
    defaultBackdropClass: "", // default ""
    defaultContainerClass: "", // default ""
    defaultShowBackdrop: true, // default true
    defaultCanResize: false, // future function
    defaultCanMove: false, // future function
  }
  const handleOpenPopup = () => {
    const singleOption = {
      backdropClass: "test_backdrop_class", // default ""
      showBackdrop: true, // default true
    }
    openPopup("TEST",{data: "Example"}, singleOption);
  }
  return <div>
    <ExampleComponent text="Create React Library Example 😄" />
    <button onClick={handleOpenPopup}>Open Popup</button>
    <MultiPopupArea config={popupConfig} option={popupOption} />
  </div>
}

export default App

License

MIT © thanhdungttrd172