# ael-modal

> Un package pour ouvrir et fermer une modal en React.

Latest version **1.1.2** (published 2023-09-22) · 0 weekly downloads

## Install

```sh
npm install ael-modal
pnpm add ael-modal
yarn add ael-modal
bun add ael-modal
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2023-09-22 |
| First published | 2023-08-24 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 7.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | elbaamraniali |
| Keywords | react, components, modal |

## Links

- npm: https://www.npmjs.com/package/ael-modal
- Repository: https://github.com/alielbaamrani/AEL-lib-Modal
- Homepage: https://github.com/alielbaamrani/AEL-lib-Modal#readme
- Issues: https://github.com/alielbaamrani/AEL-lib-Modal/issues
- npm.io page: https://npm.io/package/ael-modal

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^18.2.0
- [ael-modal](https://npm.io/package/ael-modal.md) ^1.0.5
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1

## 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.1.2 (latest) — 2023-09-22
- 1.1.1 — 2023-09-22
- 1.1.0 — 2023-09-07
- 1.0.5 — 2023-09-05
- 1.0.4 — 2023-09-05
- 1.0.3 — 2023-09-05
- 1.0.2 — 2023-09-05
- 1.0.1 — 2023-09-05
- 1.0.0 — 2023-08-30
- 0.9.8 — 2023-08-29
- 0.9.7 — 2023-08-29
- 0.9.6 — 2023-08-29
- 0.9.5 — 2023-08-29
- 0.9.4 — 2023-08-29
- 0.9.3 — 2023-08-29
- … 11 more at https://npm.io/package/ael-modal/versions

## README

<a name="readme-top"></a>

<div align="center">
<a href="https://www.npmjs.com/package/ael-modal"><img alt="npm" src="https://img.shields.io/npm/dw/ael-modal"></a>
<b

<a href="https://www.npmjs.com/package/ael-modal"><img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/ael-modal"></a>

<a href="https://www.npmjs.com/package/ael-modal">

<img alt="Maintenance Status" src="https://img.shields.io/badge/maintenance-active-green.svg" />

</a>

</div>

<!-- PROJECT LOGO -->
<br />
<div align="center">
  <a href="https://github.com/othneildrew/Best-README-Template">
  </a>

  <h3 align="center">AEL-MODAL</h3>

  <p align="center">
first package npm  For openclassRoom Project 
    <br />
    <br />
    <br />
</div>

<!-- ABOUT THE PROJECT -->

## About The Project

HRNet project which aims to be able to add new employees to a sortable table.

### Built With

[![React][React.js]][React-url]

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- GETTING STARTED -->

## Getting Started

This is an example of how you may give instructions on setting up your project locally.
To get a local copy up and running follow these simple example steps.

### Prerequisites

This is an example of how to list things you need to use the software and how to install them.

- npm
  ```sh
  npm install npm@latest -g
  ```

### Installation

_Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._

1. install
   ```sh
   npm install ael-modal
   ```
2. Install  packages
   ```sh
   npm install sass
   ```


## Example

```js
import React, { useState } from "react"; // Assurez-vous d'importer React également
import Modal from "ael-modal";

const Example = () => {
  const [modalIsDisplayed, setModalIsDisplayed] = useState(false);

  const handleSubmit = e => {
    e.preventDefault();
    setModalIsDisplayed(true);
  };

  const onCloseModal = () => {
    setModalIsDisplayed(false);
  };

  return (
    <section className="container">
      <h1 className="title">Modal Exemple</h1>
      <form onSubmit={handleSubmit}>
        <button type="submit">Click me</button>

      </form>
      <Modal
        isDisplayed={modalIsDisplayed}
        onCloseModal={onCloseModal}
        content={
          <div className="modal">
            <p>Message de la modal</p> 
            {/* <div onClick={onCloseModal} className="custom-modal-btn-close">
              Fermer
            </div> */}
          </div>
        }
      />
    </section>
  );
};

export default Example;
```

<!-- LICENSE -->

## License

Distributed under the MIT License. See `LICENSE.txt` for more information.

<!-- CONTACT -->

## LINK

Project Link: [https://www.npmjs.com/package/ael-modal)

<!-- MARKDOWN LINKS & IMAGES -->

[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[React-url]: https://reactjs.org/

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