# react-modal-package

> This react component renders a modal with a message centered inside it with a close button.

Latest version **1.2.2** (published 2024-01-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-modal-package
pnpm add react-modal-package
yarn add react-modal-package
bun add react-modal-package
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2024-01-30 |
| First published | 2023-04-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Charles-Henri Saint-Mars |
| Maintainers | charlenry_dev |
| Keywords | react, modal |

## Links

- npm: https://www.npmjs.com/package/react-modal-package
- Repository: https://github.com/charlenry/react-modal-package
- Homepage: https://github.com/charlenry/react-modal-package#readme
- Issues: https://github.com/charlenry/react-modal-package/issues
- npm.io page: https://npm.io/package/react-modal-package

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.2.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.2 (latest) — 2024-01-30
- 1.2.0 — 2024-01-30
- 1.1.9 — 2023-04-29
- 1.1.8 — 2023-04-27

## README

# react-modal-package

This react component renders a modal with a message centered inside it with a close button. The react modal can be customized.

## Install this package:

```shell
npm install react-modal-package
```

##  Import the Modal component

```jsx
import Modal from "react-modal-package";
```

## Usage

This react modal takes in seven props :

- `displayState` - The open or closed state of the modal. It can be manage with a local state like in the example below. The two values are <b>block</b> and <b>none</b>. The modal is Hidden by default.
- `handleClose` - The callback that handles the close button of the modal.
- `message` - The message to display in the modal
- `bgColor` - The background color of the modal (optional)
- `textColor` - The text color of the message (optional)
- `textSize` - The text size of the message (optional)
- `btnColor` - The basic color of the close button (optional)

You need also to put the CSS code below in a CSS file in your project and import this file where the modal component is placed.

```css
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal .modal-message {
  font-size: 2rem;
  font-weight: 600;
  color: #12002b;
  text-align: center;
  margin-top: 5rem;
}
/* Modal Content */
.modal .modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 2rem;
  border: 0.1rem solid #888;
  width: 80%;
  height: 15rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    
}
/* The Close Button */
.modal .modal-content .close-button {
  color: #aaaaaa;
  float: right;
  font-size: 2rem;
  font-weight: bold;
}
.modal .modal-content .close-button:hover, 
.modal .modal-content .close-button:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
```
You can further customize your modal with this css code, especially for media queries.

### Example

```jsx
import { useState } from "react";
import Modal from "react-modal-package";

function App() {
  const [modalDisplayState, setModalDisplayState] = useState("none");

  const handleOpenModal = () => {
    setModalDisplayState("block");
  };

  const handleCloseModal = () => {
    setModalDisplayState("none");
  };

  return (
    <div>
      <button onClick={handleOpenModal}>Open Modal</button>
      <Modal
        displayState={modalDisplayState}
        handleClose={handleCloseModal}
        message="You have successfully used this modal!"
        bgColor=""
        textColor=""
        textSize=""
        btnColor=""
      />
    </div>
  );
}

export default App;
```

---
_Source: https://npm.io/package/react-modal-package · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._