arnaudballand-react-modal-library v1.0.2

arnaudballand-react-modal-library

arnaudballand-react-modal-library is a simple and reusable modal component for React

Installation

The package can be installed via npm

npm i arnaudballand-react-modal-library

Configuration

1. import

When you need the modal component, you have to import the component in your file

import { Modal } from 'arnaudballand-react-modal-library'

2. Required props

To run this modal, only two props are required

isModalOpen, // Boolean
setIsModalOpen, // Function to update isModalOpen

Example

Basic example

import React, { useState } from 'react'
import { Modal } from 'arnaudballand-react-modal-library'

const Example = () => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  return (
    <>
      <button onClick={() => setIsModalOpen(true)}>Open modal</button>
      <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen}>
        <h2>Modal test</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
      </Modal>
    </>
  )
}

Add className to customize modal with css

<Modal
  className="customModal"
  isModalOpen={isModalOpen}
  setIsModalOpen={setIsModalOpen}
>
  ...
</Modal>

.customModal .reactModalLib__container {
  background-color: #c1121f;
}

License

Licensed under MIT license.