# plugin-react-component-modal

> plugin d'un composent react modal

Latest version **1.0.7** (published 2023-01-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install plugin-react-component-modal
pnpm add plugin-react-component-modal
yarn add plugin-react-component-modal
bun add plugin-react-component-modal
```

## 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.7 |
| Published | 2023-01-28 |
| First published | 2023-01-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 81 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Fahima Cherfa |
| Maintainers | fahima-cherfa |
| Keywords | plugin, modal |

## Links

- npm: https://www.npmjs.com/package/plugin-react-component-modal
- Repository: https://github.com/CHE-MIMA/p14-plugin-modal
- Homepage: https://github.com/CHE-MIMA/p14-plugin-modal#readme
- Issues: https://github.com/CHE-MIMA/p14-plugin-modal/issues
- npm.io page: https://npm.io/package/plugin-react-component-modal

## Dependencies (81)

- [ms](https://npm.io/package/ms.md) ^2.1.2
- [has](https://npm.io/package/has.md) ^1.0.3
- [glob](https://npm.io/package/glob.md) ^7.2.3
- [once](https://npm.io/package/once.md) ^1.4.0
- [pify](https://npm.io/package/pify.md) ^4.0.1
- [chalk](https://npm.io/package/chalk.md) ^2.4.2
- [debug](https://npm.io/package/debug.md) ^4.3.4
- [jsesc](https://npm.io/package/jsesc.md) ^2.5.2
- [json5](https://npm.io/package/json5.md) ^2.2.3
- [slash](https://npm.io/package/slash.md) ^2.0.0
- [braces](https://npm.io/package/braces.md) ^3.0.2
- [semver](https://npm.io/package/semver.md) ^6.3.0
- [wrappy](https://npm.io/package/wrappy.md) ^1.0.2
- [esutils](https://npm.io/package/esutils.md) ^2.0.3
- [gensync](https://npm.io/package/gensync.md) ^1.0.0-beta.2
- [globals](https://npm.io/package/globals.md) ^11.12.0
- [is-glob](https://npm.io/package/is-glob.md) ^4.0.3
- [resolve](https://npm.io/package/resolve.md) ^1.22.1
- [yallist](https://npm.io/package/yallist.md) ^3.1.1
- [anymatch](https://npm.io/package/anymatch.md) ^3.1.3
- [chokidar](https://npm.io/package/chokidar.md) ^3.5.3
- [escalade](https://npm.io/package/escalade.md) ^3.1.1
- [has-flag](https://npm.io/package/has-flag.md) ^3.0.0
- [inflight](https://npm.io/package/inflight.md) ^1.0.6
- [inherits](https://npm.io/package/inherits.md) ^2.0.4
- [make-dir](https://npm.io/package/make-dir.md) ^2.1.0
- [readdirp](https://npm.io/package/readdirp.md) ^3.6.0
- [regjsgen](https://npm.io/package/regjsgen.md) ^0.7.1
- [commander](https://npm.io/package/commander.md) ^4.1.1
- [is-number](https://npm.io/package/is-number.md) ^7.0.0
- [js-tokens](https://npm.io/package/js-tokens.md) ^4.0.0
- [lru-cache](https://npm.io/package/lru-cache.md) ^5.1.1
- [minimatch](https://npm.io/package/minimatch.md) ^3.1.2
- [picomatch](https://npm.io/package/picomatch.md) ^2.3.1
- [scheduler](https://npm.io/package/scheduler.md) ^0.23.0
- [color-name](https://npm.io/package/color-name.md) ^1.1.3
- [concat-map](https://npm.io/package/concat-map.md) ^0.0.1
- [fill-range](https://npm.io/package/fill-range.md) ^7.0.1
- [is-extglob](https://npm.io/package/is-extglob.md) ^2.1.1
- [path-parse](https://npm.io/package/path-parse.md) ^1.0.7
- [picocolors](https://npm.io/package/picocolors.md) ^1.0.0
- [regenerate](https://npm.io/package/regenerate.md) ^1.4.2
- [ansi-styles](https://npm.io/package/ansi-styles.md) ^3.2.1
- [fs.realpath](https://npm.io/package/fs.realpath.md) ^1.0.0
- [glob-parent](https://npm.io/package/glob-parent.md) ^5.1.2
- [regjsparser](https://npm.io/package/regjsparser.md) ^0.9.1
- [browserslist](https://npm.io/package/browserslist.md) ^4.21.4
- [caniuse-lite](https://npm.io/package/caniuse-lite.md) ^1.0.30001445
- [loose-envify](https://npm.io/package/loose-envify.md) ^1.4.0
- [regexpu-core](https://npm.io/package/regexpu-core.md) ^5.2.2
- [color-convert](https://npm.io/package/color-convert.md) ^1.9.3
- [function-bind](https://npm.io/package/function-bind.md) ^1.1.1
- [node-releases](https://npm.io/package/node-releases.md) ^2.0.8
- [balanced-match](https://npm.io/package/balanced-match.md) ^1.0.2
- [core-js-compat](https://npm.io/package/core-js-compat.md) ^3.27.1
- [is-binary-path](https://npm.io/package/is-binary-path.md) ^2.1.0
- [is-core-module](https://npm.io/package/is-core-module.md) ^2.11.0
- [normalize-path](https://npm.io/package/normalize-path.md) ^3.0.0
- [supports-color](https://npm.io/package/supports-color.md) ^5.5.0
- [to-regex-range](https://npm.io/package/to-regex-range.md) ^5.0.1
- [brace-expansion](https://npm.io/package/brace-expansion.md) ^1.1.11
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [path-is-absolute](https://npm.io/package/path-is-absolute.md) ^1.0.1
- [binary-extensions](https://npm.io/package/binary-extensions.md) ^2.2.0
- [convert-source-map](https://npm.io/package/convert-source-map.md) ^1.9.0
- [to-fast-properties](https://npm.io/package/to-fast-properties.md) ^2.0.0
- [regenerator-runtime](https://npm.io/package/regenerator-runtime.md) ^0.13.11
- [electron-to-chromium](https://npm.io/package/electron-to-chromium.md) ^1.4.284
- [escape-string-regexp](https://npm.io/package/escape-string-regexp.md) ^1.0.5
- [fs-readdir-recursive](https://npm.io/package/fs-readdir-recursive.md) ^1.1.0
- [regenerator-transform](https://npm.io/package/regenerator-transform.md) ^0.15.1
- [update-browserslist-db](https://npm.io/package/update-browserslist-db.md) ^1.0.10
- [babel-plugin-polyfill-corejs2](https://npm.io/package/babel-plugin-polyfill-corejs2.md) ^0.3.3
- [babel-plugin-polyfill-corejs3](https://npm.io/package/babel-plugin-polyfill-corejs3.md) ^0.6.0
- [regenerate-unicode-properties](https://npm.io/package/regenerate-unicode-properties.md) ^10.1.0
- [supports-preserve-symlinks-flag](https://npm.io/package/supports-preserve-symlinks-flag.md) ^1.0.0
- [babel-plugin-polyfill-regenerator](https://npm.io/package/babel-plugin-polyfill-regenerator.md) ^0.4.1
- [unicode-match-property-ecmascript](https://npm.io/package/unicode-match-property-ecmascript.md) ^2.0.0
- [unicode-property-aliases-ecmascript](https://npm.io/package/unicode-property-aliases-ecmascript.md) ^2.1.0
- [unicode-match-property-value-ecmascript](https://npm.io/package/unicode-match-property-value-ecmascript.md) ^2.1.0
- [unicode-canonical-property-names-ecmascript](https://npm.io/package/unicode-canonical-property-names-ecmascript.md) ^2.0.0

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.0.7 (latest) — 2023-01-28
- 1.0.6 — 2023-01-25
- 1.0.5 — 2023-01-25
- 1.0.4 — 2023-01-24
- 1.0.3 — 2023-01-16
- 1.0.2 — 2023-01-16
- 1.0.1 — 2023-01-16
- 1.0.0 — 2023-01-16

## README

# modal Projet14 openClassrooms

Simple Modal component for React.

# Installation

Install with npm: 

npm i plugin-react-component-modal


## Examples

Here is a simple example of plugin-react-component-modal being used in an form.

      import React, { useState } from 'react';

      import Modal from 'plugin-react-component-modal';

      function Form() = ( ) => {

        const [openModal, setOpenModal] = useState();

        const [firstName, setFirstName] = useState("");
    
    
        const closeModalOnClick = ( ) => {
        setOpenModal(false);
        }
    
       const handleSubmit = (e) => {
        e.preventDefault();
        setOpenModal(true);
        }
       return (

       <div>
         <form onSubmit={handleSubmit}  id="form">
         <label htmlFor="first-name">First Name</label>
         <input type="text" id="first-name" name='firstName' onChange={(e) => setFirstName(e.target.value)}
          value={firstName}/>
            <div className='Btn'>
                    <button type='submit'>Submit</button>
            </div>
         </form>
         <Modal openModal={openModal}
              closeModal={closeModalOnClick}
              title="employé created !"
              closeButton="x" />
        </div> 
      ); }
  
   


## Options
OpenModal: boolean

Control modal state from component

closeModal: Function

Handle modal closing.

title: JSX.Element | string

Place here your Content of title

closeButton: (JSX.Element | string)

Content of your closing button

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