oc14-modal-library v1.4.0

oc14-modal-library

A simple react modal library (oc 14) It will provide you with a simple black backdrop and a div to place custom content into. As well as close button to hide the modal

Install

npm install --save oc14-modal-library

Usage

// Import the library into the component file that needs to contain the modal
import MyComponent from 'oc14-modal-library'
// Simple css to display the backdrop and close button styles
import 'oc14-modal-library/dist/index.css'

// Your component
function MyComponent() {
  
  // State manager to track if the modal is showing or not
  const [showModal, setShowModal] = useState(false)

  // Function to hide the modal if you need to have another action to close the modal
  const hideModal = () => showModal && setShowModal(false)
  
  return(
    // Your trigger to open the modal - setShowModal(true) should be bound to your trigger element
    <button onClick={() => setShowModal(true)}>Show Modal</button>
    
    // The modal component
    // @params 
    // show: bool - the state of the modal
    // onClickCloseBtn: fun - action on click of the close button
    <Modal show={showModal} onClickCloseBtn={hideModal}>
      // Your custom content goes in here and can be styled freely
      <h1>I am a modal</h1>
    </Modal>
  )
}

License

MIT © voleurdebeurre