# simple_react_modal_component

> [![npm version](https://img.shields.io/npm/v/simple_react_modal_component.svg)](https://www.npmjs.com/package/simple_react_modal_component)

Latest version **1.0.5** (published 2023-09-25) · 0 weekly downloads

## Install

```sh
npm install simple_react_modal_component
pnpm add simple_react_modal_component
yarn add simple_react_modal_component
bun add simple_react_modal_component
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2023-09-25 |
| First published | 2023-09-20 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 6.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | baptlab |

## Links

- npm: https://www.npmjs.com/package/simple_react_modal_component
- npm.io page: https://npm.io/package/simple_react_modal_component

## Dependencies (8)

- [npm](https://npm.io/package/npm.md) ^10.1.0
- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.4.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.17.0
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0

## Recent versions

- 1.0.5 (latest) — 2023-09-25
- 1.0.4 — 2023-09-20
- 1.0.3 — 2023-09-20
- 1.0.2 — 2023-09-20
- 1.0.1 — 2023-09-20
- 1.0.0 — 2023-09-20

## README

# React Modal Component

[![npm version](https://img.shields.io/npm/v/simple_react_modal_component.svg)](https://www.npmjs.com/package/simple_react_modal_component)

A customizable and easy-to-use React modal component for your web applications.

## Table of Contents

- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [Styling](#styling)
- [Examples](#examples)
- [Contributing](#contributing)
- [License](#license)

## Installation

You can install this component using npm or yarn:

```bash
npm install simple_react_modal_component
# or
yarn add simple_react_modal_component
```

## Usage

To use the Modal component, you need to manage a state variable in your React component that controls whether the modal is open or closed. Here's an example of how to set up the state and use the Modal component:

```bash
import React, { useState } from 'react';
import Modal from 'simple_react_modal_component';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>

      <Modal
        trigger={isOpen} // Pass the state variable here
        setTrigger={setIsOpen} // Pass the state update function here
        closingMsg="Close"
        popUpMsg="This is the modal content."
      />
    </div>
  );
}

export default App;
```

In the example above, we use the useState hook to create an isOpen state variable and setIsOpen function to manage the modal's open and close state. You can customize this state management according to your application's needs.

## Props

The Modal component accepts the following props:

trigger (boolean, required): Controls whether the modal is open or closed.

setTrigger (function, required): A function that toggles the trigger state. Typically used to open or close the modal.

closingMsg (string, optional): Text for the close button. Default is "Close".

popUpMsg (string or JSX, optional): Content of the modal. You can pass text or JSX elements.

## Styling

You can style the modal by including the provided CSS file modal.css. You may customize the styles to fit your project's design.

```bash
import 'simple_react_modal_component/modal.css';
```

License
This project is licensed under the MIT License - see the LICENSE file for details.

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