https://github.com/muriukialex/react-modal-popup

A package to create modal pop ups for a React application
https://github.com/muriukialex/react-modal-popup

react react-components react-custom-modals react-hooks react-modal-popup

Last synced: about 2 months ago
JSON representation

A package to create modal pop ups for a React application

• Host: GitHub
• URL: https://github.com/muriukialex/react-modal-popup
• Owner: muriukialex
• License: mit
• Created: 2023-11-06T14:21:25.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-08-12T19:40:01.000Z (5 months ago)
• Last Synced: 2024-10-13T11:35:49.873Z (3 months ago)
• Topics: react, react-components, react-custom-modals, react-hooks, react-modal-popup
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@muriukialex/react-modal-popup
• Size: 268 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

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

```bash

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:

```javascript

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

const YourComponent = () => {

  const handleCloseModal = () => {

    // Handle modal close action

  };

  return (

    

      {/* Your content goes here */}

    

  );

};

```

### 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

```javascript

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

const App = () => {

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

  const handleCloseModal = () => {

    setShowModal(false);

  };

  const handleShowModal = () => {

    setShowModal(true);

  };

  return (

    


      
React Pop up Modal Example

      Show Modal


      

        Some message

      

    

  );

};

```


## 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](https://github.com/muriukialex/react-modal-popup/issues).

## Contributing

Contributions are welcome! Feel free to submit a [pull request](https://github.com/muriukialex/react-modal-popup/pulls).

---