# p14-modal-opc

> P14-modal-opc is a versatile and intuitive modal library that can be easily integrated into any React application. Developed as part of Project 14 of the OpenClassroom course, this open-source library provides a seamless way to add modals to your projects

Latest version **0.1.2** (published 2023-06-01) · 0 weekly downloads

## Install

```sh
npm install p14-modal-opc
pnpm add p14-modal-opc
yarn add p14-modal-opc
bun add p14-modal-opc
```

## 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.2 |
| Published | 2023-06-01 |
| First published | 2023-05-30 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 26.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | pedrofalante |

## Links

- npm: https://www.npmjs.com/package/p14-modal-opc
- npm.io page: https://npm.io/package/p14-modal-opc

## Dependencies (7)

- [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) ^2.1.3
- [@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.2 (latest) — 2023-06-01
- 0.1.1 — 2023-06-01
- 0.1.0 — 2023-05-30

## README

## Description

P14-modal-opc is a versatile and intuitive modal library that can be easily integrated into any React application. Developed as part of Project 14 of the OpenClassroom course, this open-source library provides a seamless way to add modals to your projects and is available for free.

It was created for Projet 14 of OpenClassroom course and it shows how use create and use an library in NPM.

## Install

npm install p14-modal-opc

## How to use

```javaScript
//This is the modal state, it will define if it's open or closed
const [showModal, setShowModal] = useState(false);

const handleSubmit = (event) => {
    event.preventDefault();
    //This is will change the state of the modal
      setShowModal(true);}
return
//This is the modal in your code, it's necessary use a message as string and integrate correctly with your useState.
<Modal isOpen={showModal} message={'Employee created!'} closeModal={() => setShowModal(false)}/></div>

<form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
```

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