@muriukialex/react-modal-popup

@muriukialex/react-modal-popup is a React package that allows you to easily create customizable modal pop-ups for your React applications. With this package, you can display content in modal dialogs with optional custom styling and an auto-close feature.

Installation

To install @muriukialex/react-modal-popup, you can use npm or yarn:

1npm install @muriukialex/react-modal-popup
2# or
3yarn add @muriukialex/react-modal-popup

Usage

Here's how you can use the Modal component in your React application:

1import Modal from '@muriukialex/react-modal-popup';
2
3const YourComponent = () => {
4  const handleCloseModal = () => {
5    // Handle modal close action
6  };
7
8  return (
9    <Modal
10      title={'Title'} {/* Add the modal title */}
11	  showModal={showModal} {/* Pass the boolean property to display the modal */}
12      onClose={handleCloseModal}
13      customContainerStyles={/* Your custom styles */}
14      customContentStyles={/* Your custom styles */}
15      customModalButtonStyles={/* Your custom styles */}
16    >
17      {/* Your content goes here */}
18    </Modal>
19  );
20};

Props

The Modal component accepts the following props:

• onClose: A callback function to handle the modal close action.
• showModal: Boolean property to conditionally display the modal.
• children: The content you want to display within the modal. (optional)
• customContainerStyles: Custom styles for the modal container. (optional)
• customContentStyles: Custom styles for the modal content. (optional)
• customModalButtonStyles: Custom styles for the modal's close button. (optional)

Example

1import Modal from '@muriukialex/react-modal-popup';
2
3const App = () => {
4  const [showModal, setShowModal] = useState(false);
5
6  const handleCloseModal = () => {
7    setShowModal(false);
8  };
9
10  const handleShowModal = () => {
11    setShowModal(true);
12  };
13
14  return (
15    <div className="App">
16      <h1>React Pop up Modal Example</h1>
17      <button onClick={handleShowModal}>Show Modal</button>
18
19      <Modal title={'Title'} showModal={showModal} onClose={handleCloseModal}>
20        Some message
21      </Modal>
22    </div>
23  );
24};

License

This package is open-source and available under the ISC License.

Issues

If you encounter any issues or have suggestions for improvement, please submit an issue on GitHub.

Contributing

Contributions are welcome! Feel free to submit a pull request.

---