import useModal from 'use-react-modal'

const App = () => {
  const { isOpen, openModal, closeModal, Modal } = useModal()

  return (
    <>
      <button onClick={openModal}>Open Me!</button>
      {isOpen && (
        <Modal>
          <button onClick={closeModal}>close</button>
          Whatever you put here will be centered to the middle of the screen.
        </Modal>
      )
    </>
  )
}

import useModal, { Provider } from 'use-react-modal'

const MyComponent = () => {
  const { isOpen, openModal, Modal } = useModal()

  return (
    <>
      <button onClick={openModal}>Open Me!</button>
      {isOpen && (
        <Modal>
          Now, whatever you put here will be centered AND have a backdrop
          with the color specified in the Provider
        </Modal>
      )
    </>
  )
}


const App = () => (
  <Provider background='rgba(0, 0, 0, 0.5)'>
    <MyComponent />
  </Portal>
)

import useModal from 'use-react-modal'

const App = () => {
  const { targetRef, openModal, closeModal, isOpen, Modal } = useModal()

  return (
    <>
      {/* see below how I don't have to pass the event if I use the ref */}
      <button ref={targetRef} onClick={() => openModal()}>
        Open Modal
      </button>
      {isOpen && (
        <Modal>
          <p>
            <button onClick={closePortal}>Close me!</button>, hit ESC or
            Cool Modal 😜
          </p>
        </Modal>
      )}
    </>
  )
}

const {
  openModal,
  closeModal,
  toggleModal,
  isOpen,
  Modal,
  // if you don't pass an event to openModal, closeModal, or toggleModal, you will need to
  // put this on the element you want to interact with/click to open the modal
  targetRef,
  // this allows you to interact directly with the backdrop/overlay
  backdropRef,
  // this allows you to interact directly with the modal
  modalRef,
} = useModal({
  // sets the color of the backdrop, if nothing is set, the backdrop will be transparent unless it's set in the Provider
  // setting to `null` removes any background set in the `Provider`
  background: 'rgba(0, 0, 0, 0.5)',
  closeOnOutsideClick: true,
  closeOnEsc: true,
  bindTo, // attach the portal to this node in the DOM
  isOpen: false,
  // `event` has all the fields that a normal `event` would have such as `event.target.value`, etc.
  // with the additional `portal` and `targetEl` added to it as seen in the examples below
  onOpen: (event) => {
    // can access: event.portal, event.targetEl, event.event, event.target, etc.
  },
  // `onClose` will not have an `event` unless you pass an `event` to `closePortal`
  onClose({ targetEl, event, portal }) {},
  // `targetEl` is the element that you either are attaching a `ref` to
  // or that you are putting `openPortal` or `togglePortal` or `closePortal` on

  // in addition, any event handler such as onClick, onMouseOver, etc will be handled the same
  onClick({ targetEl, event, portal }) {}
})

const [openModal, closeModal, isOpen, Modal, toggleModal, targetRef, portalRef, modalRef] = useModal()