# react-personalizable-modal-by-fatma

> Ce projet vous permet de créer une modale d'une maière simple. Vous pouvez la personaliser en ajoutant de l'animation et vos propres couleurs. ## Utilisation du composant Modal

Latest version **0.1.8** (published 2023-09-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-personalizable-modal-by-fatma
pnpm add react-personalizable-modal-by-fatma
yarn add react-personalizable-modal-by-fatma
bun add react-personalizable-modal-by-fatma
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2023-09-11 |
| First published | 2023-09-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 50.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Fatma NABLI |
| Maintainers | fatma.nabli |
| Keywords | react, modal |

## Links

- npm: https://www.npmjs.com/package/react-personalizable-modal-by-fatma
- Repository: https://github.com/FatmaNABLI/react-personalizable-modal-by-fatma
- Homepage: https://github.com/FatmaNABLI/react-personalizable-modal-by-fatma#readme
- Issues: https://github.com/FatmaNABLI/react-personalizable-modal-by-fatma/issues
- npm.io page: https://npm.io/package/react-personalizable-modal-by-fatma

## 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

- 0.1.8 (latest) — 2023-09-11
- 0.1.7 — 2023-09-10
- 0.1.6 — 2023-09-10
- 0.1.5 — 2023-09-10
- 0.1.4 — 2023-09-09
- 0.1.3 — 2023-09-09
- 0.1.2 — 2023-09-09
- 0.1.1 — 2023-09-09
- 0.1.0 — 2023-09-08

## README

# Getting Started

Ce package vous permet de créer une modale d'une manière simple. Vous pouvez la personnaliser en ajoutant de l'animation et vos propres couleurs.

## Les 3 types de modal

<img  src="src/modals.png"  alt="default/success/error Modal"/>


## Utilisation du composant Modal  

```javascript

//Importer le composant Modal
import  Modal  from  "react-personalizable-modal-by-fatma/src/Modal"

//Dans la partie déclaration
const [isOpen,setIsOpen]=useState(false);
  
//Dans la partie return
<Modal  isOpen = {isOpen}  setIsOpen={setIsOpen}
type="ERROR"
icone={true}
titre="Titre"
texte="Texte souhaité!"
animation = {true}  animationFrom={"LEFT"}
/>

//Au clic sur le bouton
<button  onClick={()=>{setIsOpen(true);}}>Ouvrir modal</button>
```

## Les props du composant Modal

| Propriété | Valeur  | Description | 
|-- |--|--|
|type|ERROR/SUCCESS|Sin on ne met rien , la modale aura une couleur par défaut et l'icone sera affichée|
|isAnimated |true/false  |
|animationFrom |TOP, BOTTOM, RIGHT,LEFT|La valeur par défaut est TOP|
|bgColor|blue/red/#000…|Permet de changer la couleur du background du header et du bouton.|
|containerStyle|**exemple** : containerStyle={{width:  '400px',height :'100px'}}|
|textStyle|**exemple** : textStyle={{fontSize:  '20px',text-align:'center'}}|
| title |string  | |
| text |string  | |

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