1.0.0 • Published 2 years ago
react-modal-zineb v1.0.0
React Modal Zineb
Description
A customizable and reusable React modal component.
Installation
npm install react-modal-zineb
Usage
import React from 'react';
import Modal from 'react-modal-zineb';
const App = () => {
const [isModalOpen, setModalOpen] = React.useState(false);
const openModal = () => setModalOpen(true);
const closeModal = () => setModalOpen(false);
const handleEvent = () => {
// This function is called during an event
// It opens the modal to indicate information
openModal();
};
return (
<div>
<button onClick={handleEvent}>Open</button>
<Modal isOpen={isModalOpen} onClose={closeModal} contentBtn="Close">
{/* Modal content goes here */}
Hello, this is my modal!
</Modal>
</div>
);
};
export default App;
Props
isOpen
(boolean): Controls whether the modal is open or closed.onClose
(function): Callback function triggered when the modal is requested to be closed.children
(node): Content of the modal.contentBtn
(node): Button for closing the modal .
1.0.0
2 years ago