# cadegancode-reactmodal

> Modal React components

Latest version **1.0.6** (published 2023-01-20) · 0 weekly downloads

## Install

```sh
npm install cadegancode-reactmodal
pnpm add cadegancode-reactmodal
yarn add cadegancode-reactmodal
bun add cadegancode-reactmodal
```

## 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.0.6 |
| Published | 2023-01-20 |
| First published | 2023-01-12 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 12.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | cadegancode |
| Keywords | react, components, modal |

## Links

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

## Dependencies (8)

- [react](https://npm.io/package/react.md) ^18.2.0
- [node-sass](https://npm.io/package/node-sass.md) ^8.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [web-vitals](https://npm.io/package/web-vitals.md) ^3.1.1
- [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.16.5
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^14.4.3

## 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.0.6 (latest) — 2023-01-20
- 1.0.5 — 2023-01-18
- 1.0.4 — 2023-01-12
- 1.0.3 — 2023-01-12
- 1.0.2 — 2023-01-12
- 1.0.1 — 2023-01-12

## README

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
[![Javascript](https://img.shields.io/badge/JavaScript-F7DF1E.svg?style=for-the-badge&logo=javascript&logoColor=black)](http://forthebadge.com)
[![SASS](https://img.shields.io/badge/Sass-hotpink.svg?style=for-the-badge&logo=sass&logoColor=white)](http://forthebadge.com)
![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)

# A React modal component

## 1. Technologies

- Javascript
- SASS
- React

## 2. Author

- [Cadegancode](https://github.com/Cadegan/)
- Version : 1.0.6

## 3. Project

### 3.1 Prerequisites

- [Node.js](https://nodejs.org/en/)
- [Yarn](https://yarnpkg.com/) or [NPM](https://www.npmjs.com/)

Please make sure you have the right versions and download both packages. You can verify this by using the following commands in your terminal:

```bash
# Check Node.js version
node --version

# Check Yarn version
yarn --version

# Check NPM version
npm --version
```

### 3.2 Installing

**NPM**

    npm i cadegancode-react-modal

or

**YARN**

    yarn add cadegancode-react-modal

## 4. Repository

The repository is available at [`https://github.com/Cadegan/cadegancode-react-modal.git`](https://github.com/Cadegan/cadegancode-react-modal.git)

## 5. How to use?

Import the modal into your React application:

```JSX
import { Modal } from "cadegancode-react-modal";
import { useState } from "react";
```

Then, add the following code :

```JSX
const [showModal, setShowModal] = useState(false);
//
//
<Modal openModal={showModal} closeModal={() => setShowModal(false)}>
    {"Edit your message here"}
</Modal>
```

## 6. Style overrides

The modal component comes with a default theme. Override it with a css if you want to apply a custom design.

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