@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:

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

Usage

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

import Modal from '@muriukialex/react-modal-popup';

const YourComponent = () => {
  const handleCloseModal = () => {
    // Handle modal close action
  };

  return (
    <Modal
      title={'Title'} {/* Add the modal title */}
	  showModal={showModal} {/* Pass the boolean property to display the modal */}
      onClose={handleCloseModal}
      customContainerStyles={/* Your custom styles */}
      customContentStyles={/* Your custom styles */}
      customModalButtonStyles={/* Your custom styles */}
    >
      {/* Your content goes here */}
    </Modal>
  );
};

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

import Modal from '@muriukialex/react-modal-popup';

const App = () => {
  const [showModal, setShowModal] = useState(false);

  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleShowModal = () => {
    setShowModal(true);
  };

  return (
    <div className="App">
      <h1>React Pop up Modal Example</h1>
      <button onClick={handleShowModal}>Show Modal</button>

      <Modal title={'Title'} showModal={showModal} onClose={handleCloseModal}>
        Some message
      </Modal>
    </div>
  );
};

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.