# my-react-modal-sv

> A simple modal component for React applications

Latest version **1.1.6** (published 2023-12-21) · 0 weekly downloads

## Install

```sh
npm install my-react-modal-sv
pnpm add my-react-modal-sv
yarn add my-react-modal-sv
bun add my-react-modal-sv
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2023-12-21 |
| First published | 2023-11-21 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 88.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | sfv2010 |

## Links

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

## Recent versions

- 1.1.6 (latest) — 2023-12-21
- 1.1.5 — 2023-12-21
- 1.1.4 — 2023-12-19
- 1.1.3 — 2023-11-30
- 1.1.2 — 2023-11-30
- 1.0.0 — 2023-11-23
- 1.9.0 — 2023-11-23
- 1.8.0 — 2023-11-23
- 1.7.0 — 2023-11-23
- 1.6.0 — 2023-11-23
- 1.5.0 — 2023-11-23
- 1.4.0 — 2023-11-23
- 1.3.0 — 2023-11-23
- 1.2.0 — 2023-11-23
- 1.1.0 — 2023-11-23
- … 1 more at https://npm.io/package/my-react-modal-sv/versions

## README

# my-react-modal-sv

This component library is Displays a modal in the center of the screen with a customizable message.

## How to install the Modal

The package can be installed via npm

```bash
npm i my-react-modal-sv
```

## Usage

Import the Modal component from the library:

```bash
import Modal from "my-react-modal-sv";
```

Import CSS (tailwind)

```bash
import 'my-react-modal-sv/dist/style.css';
```

The Modal component needs 3 props :

-   {isOpen} : A property that indicates whether the modal is displayed.
-   {onClose} : A callback function to close the modal.
-   {children} : The content displayed within the modal.

Here's an example:

```jsx
import { useState } from "react";
import Modal from "my-react-modal-sv";
import "my-react-modal-sv/dist/style.css";

function Example() {
    const [isModalOpen, setIsModalOpen] = useState(false);

    const openModal = () => {
        setIsModalOpen(true);
    };

    const closeModal = () => {
        setIsModalOpen(false);
    };
    const handleSubmit = (e) => {
        e.preventDefault();
        openModal();
    };

    return (
        <div>
            <form
                onSubmit={handleSubmit}
                className="flex justify-center  items-center h-screen">
                {" "}
                <label className=" text-black font-bold  pr-4">
                    User:{" "}
                    <input
                        type="text"
                        name="username"
                        className="bg-gray-200 appearance-none border-2 border-gray-400 rounded py-2 px-4 text-gray-700 leading-tight focus:bg-white focus:outline-green-700 "
                    />
                </label>
                <button
                    type="submit"
                    className="rounded border-solid border-2 border-custom-505 font-bold p-3">
                    Submit Form
                </button>
            </form>

            <Modal isOpen={isModalOpen} onClose={closeModal}>
                <h1>Example created !</h1>
            </Modal>
        </div>
    );
}

export default Example;
```

## Interface

![my-react-modal component](exemple.png)

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