@doopage/use-modal

Simple way to control modal

Install

npm install --save @doopage/use-modal

Usage

Call function

in Modal.js

import { closeModal, useModal } from '@doopage/use-modal'

const Modal = () => {
  const { open, data } = useModal('modal_name')

  if (!open) return null
  return (
    <div>
      {/* modal content */}
      <Button onClick={() => closeModal('modal_name')}>close</Button>
    </div>
  )
}

export default Modal

in somewhere

import { openModal } from '@doopage/use-modal'

openModal('modal_name')

use InitModal

in MyModal.js

import { closeModal, useModal, initModal } from '@doopage/use-modal'

export const MyModal = initModal('modal_name')

const Modal = () => {
  const { open, data } = MyModal.useModal()

  if (!open) return null
  return (
    <div>
      {/* modal content */}
      <Button onClick={() => MyModal.close()}>close</Button>
    </div>
  )
}

export default Modal

in somewhere

import { MyModal } from 'path/MyModal.js'

MyModal.open({ data:[1,2,3] })

License

MIT