# react-modal-youssef

> modal dialog component for React.JS

Latest version **0.1.0** (published 2023-04-04) · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2023-04-04 |
| First published | 2023-04-04 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 5.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | youssefeljaimi |
| Maintainers | youssefeljaimi |

## Links

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

## Dependencies (6)

- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.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) ^13.5.0

## Recent versions

- 0.1.0 (latest) — 2023-04-04

## README

# Modal

## Install

Install using `npm install react-modal-youssef`

## Usage

In a React app, use the Modal components:
`import { Modal } from 'react-modal-youssef'`


## Modal props

| Name        | Description      
| ----------- | -----------      
| backdrop    | Boolean (optional)           
| darkTheme   | Boolean (optional)             
| btnClose    | Boolean (optional)           
| crossClose  | Boolean (optional)             
| onClose     | function              
| isOpen      | Boolean          


## Exemple

```js
import React, { useState } from "react";
import { Modal } from "react-modal-youssef";

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

  const toggleModal = () => setIsOpen(!isOpen);

  return (
    <>
      <main>
        <button className="btn-click" onClick={toggleModal}>
          CLICK ME
        </button>
     
          <Modal  isOpen={isOpenModal} backdrop crossClose onClose={toggleModal}>
            <p>Success! 🥳</p>
          </Modal>
        
      </main>
    </>
  );
}

export default App;
`

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