react-headless-modal v0.1.3

react-headless-modal

❗️ Still working with it, not released yet.

Install

npm install --save react-headless-modal

Usage

You have to use at least 2 div elements, one for a backdrop and the other for a modal.

import HeadlessModal from 'react-headless-modal'
import { useHeadlessModal } from 'react-headless-modal'

const backdropStyle = {
  position: 'fixed',
  width: '100%',
  height: '100%',
  top: ' 0',
  left: '0',
  background: `rgba(0, 0, 0, 0.4)`
} as React.CSSProperties
const modalStyle = {
  position: 'fixed',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  outline: '0',
  width: '300px',
  height: '200px',
  backgroundColor: '#fff'
} as React.CSSProperties

const App = () => {
  const { isModalOpen, openModal, closeModal } = useHeadlessModal()

  const buttonClickHandler = () => {
    openModal()
  }

  return (
    <>
      <button onClick={buttonClickHandler} />
      <HeadlessModal isOpen={isModalOpen}>
        {() => (
          <>
            <div style={backdropStyle} onClick={closeModal} />
            <div style={modalStyle}>Modal</div>
          </>
        )}
      </HeadlessModal>
    </>
  )
}

export default App

License

MIT © kyuhyunhan