@melacod/react-modal v1.0.2

react-modal

Basic React Modal

Install

npm install --save @melacod/react-modal

Usage

import React, { useState } from 'react'
import Modal from '@melacod/react-modal'

const BasicExample = () => {

  const [showModal, setShowModal] = useState(false)
  const hideModal = () => showModal && setShowModal(false)

  return (
    <button onClick={() => setShowModal(true)}>
      Basic modal
    </button>

    <Modal show={showModal} onClickCloseBtn={hideModal} title='Basic modal'>
      <p>I am a basic modal</p>
    </Modal>
  )
}

Advanced usage

import React, { useState } from 'react'
import Modal from '@melacod/react-modal'

const CustomizeFooter = () => {
  return <p>My custom footer</p>
}

const CustomizeHeader = () => {
  return <p>My custom header</p>
}

const AdvancedExample = () => {

  const [showModal, setShowModal] = useState(false)
  const hideModal = () => showModal && setShowModal(false)

  return (
    <button onClick={() => setShowModal(true)}>
      Advanced modal
    </button>

    <Modal
      show={showModal}
      onClickCloseBtn={hideModal  }
      footer={<CustomizeFooter />}
      header={<CustomizeHeader />}
      backgroundColor='lightyellow'
      backdropBackgroundColor='rgba(255,165,0, 0.5)'
    >
      <p>I am an advanced modal</p>
    </Modal>
  )
}

License

MIT © melacod