A simple React modal component with a ball design.
React Ball Modal is a lightweight and customizable modal component for React applications.
Before using this modal component, make sure you have the following dependency installed:
You can install react-ball-modal via npm:
npm install react-ball-modal
Here's an example of importing and using the Modal component in your project:
import Modal from 'react-ball-modal'
function MyComponent() {
const [isModalOpen, setIsModalOpen] = useState(false)
const handleOpenModal = () => {
setIsModalOpen(true)
}
const handleCloseModal = () => {
setIsModalOpen(false)
}
return (
<div>
<button onClick={handleOpenModal}>Open Modal</button>
<Modal isOpen={isModalOpen} onClose={handleCloseModal} message='Choose your content !' />
</div>
)
}
export default MyComponent
-
isOpen
(boolean, required): Controls whether the modal is open or closed. -
onClose
(function, required): Callback function to handle closing the modal. -
message
(string): Message to display inside the modal.
To apply the default styles provided with the Modal component, you can import the default CSS file into your project:
import 'react-ball-modal/src/index.css'
This project is licensed under the MIT License - see the LICENSE.md file for details.