@idot-digital/popup NPM

popup

Overlay premade or custom popups

Install

npm install --save popup

import { PopupManager, PopupContextProvider } from 'popup'
import 'popup/dist/index.css'

// Wrap PopupManager around your main App, passing a Provider used later on
export const PopupManagerProvider = React.createContext(PopupContextProvider)

ReactDOM.render(
  <PopupManager context={PopupManagerProvider}>
    <App />
  </PopupManager>,
  document.getElementById('root')
)

Usage

import React, { Component } from 'react'

import Popup from 'popup'
import { PopupManagerProvider } from './index'

function FunctionalExample() {
  // Either use dispatch events from PopupManagerProvider
  const {
    setPopup,
    setCloseOnEdgePress,
    setOnClose,
    setOnOpen
  } = React.useContext(PopupManagerProvider)

  // or use the premade popup manager,
  const popup = new Popup(React.useContext(PopupManagerProvider))

  return (
    <div
      onClick={() => {
        // to manually change settings (setPopup rerenders and applies settings)
        setOnClose(() => () => console.log('closed'))
        setOnOpen(() => () => console.log('opnened'))
        setCloseOnEdgePress(() => true)
        setPopup(() => <div>Some manual popup content</div>)
        // or use generic popups, handling events and inputs.
        popup.createCustomPopup({
          element: <div>Some popup content</div>,
          onClose: () => console.log('closed'),
          onOpen: () => console.log('opened')
        })
      }}
    >
      your component
    </div>
  )
}