npm package: @lapauze/react-green-modal
Description: Un composant Modal React élégant avec animations et style vert
Author: Araujo Manon
Latest version: 1.0.0

# 🎨 React Green Modal

Un composant Modal React élégant avec animations fluides et style vert.

Créé par **Araujo Manon** (@lapauze)

![Version](https://img.shields.io/npm/v/@lapauze/react-green-modal)
![License](https://img.shields.io/npm/l/@lapauze/react-green-modal)
![Size](https://img.shields.io/bundlephobia/min/@lapauze/react-green-modal)

## ✨ Fonctionnalités

- ✅ Animations fluides (fadeIn, slideUp)
- ✅ Fermeture par clic sur l'overlay ou bouton X
- ✅ Bouton de fermeture animé avec rotation
- ✅ Icône checkmark animée personnalisable
- ✅ Responsive design (mobile-friendly)
- ✅ Style vert élégant et moderne
- ✅ Backdrop blur pour un effet professionnel
- ✅ Zéro dépendance externe
- ✅ Léger (~5KB)
- ✅ TypeScript ready

## 📦 Installation

```bash
npm install @lapauze/react-green-modal
```

ou avec yarn :

```bash
yarn add @lapauze/react-green-modal
```

## 🚀 Utilisation Basique

```jsx
import React, { useState } from 'react';
import Modal from '@lapauze/react-green-modal';

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

  const handleSave = () => {
    // Votre logique de sauvegarde
    setIsOpen(true); // Ouvrir le modal après la sauvegarde
  };

  return (
    <div>
      <button onClick={handleSave}>
        Sauvegarder
      </button>

      <Modal 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)} 
        message="Employé créé avec succès!" 
      />
    </div>
  );
}

export default App;
```

## 📋 Props

| Prop | Type | Défaut | Description |
|------|------|--------|-------------|
| `isOpen` | `boolean` | **requis** | Contrôle si le modal est ouvert ou fermé |
| `onClose` | `function` | **requis** | Fonction appelée lors de la fermeture du modal |
| `message` | `string` | **requis** | Message à afficher dans le modal |
| `icon` | `string` | `'✓'` | Icône à afficher au-dessus du message |
| `iconColor` | `string` | `'#6ba83e'` | Couleur de l'icône |
| `className` | `string` | `''` | Classes CSS supplémentaires pour personnalisation |

## 🎨 Exemples d'Utilisation

### Exemple 1 : Modal de succès (par défaut)

```jsx
<Modal 
  isOpen={isOpen} 
  onClose={() => setIsOpen(false)} 
  message="Opération réussie!" 
/>
```

### Exemple 2 : Modal avec icône personnalisée

```jsx
<Modal 
  isOpen={isOpen} 
  onClose={() => setIsOpen(false)} 
  message="Bienvenue sur notre plateforme!" 
  icon="👋"
  iconColor="#4a7c2c"
/>
```

### Exemple 3 : Modal d'erreur

```jsx
<Modal 
  isOpen={isOpen} 
  onClose={() => setIsOpen(false)} 
  message="Une erreur s'est produite" 
  icon="⚠️"
  iconColor="#d32f2f"
/>
```

### Exemple 4 : Modal de félicitations

```jsx
<Modal 
  isOpen={isOpen} 
  onClose={() => setIsOpen(false)} 
  message="Félicitations pour votre achat!" 
  icon="🎉"
  iconColor="#ff9800"
/>
```

### Exemple 5 : Avec classes personnalisées

```jsx
<Modal 
  isOpen={isOpen} 
  onClose={() => setIsOpen(false)} 
  message="Message personnalisé" 
  className="mon-modal-custom"
/>
```

## 🎭 Personnalisation Avancée

Vous pouvez surcharger les styles CSS en ciblant les classes :

```css
/* Modifier l'overlay */
.modal-overlay {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Modifier le contenu du modal */
.modal-content {
  border-radius: 24px;
  padding: 50px;
}

/* Modifier le bouton de fermeture */
.modal-close {
  background: #ff0000;
}

/* Modifier le message */
.modal-message {
  font-size: 2rem;
  color: #000;
}

/* Modifier l'icône */
.modal-icon {
  font-size: 4rem;
}
```

## 🔧 Intégration avec des Formulaires

```jsx
function EmployeeForm() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [formData, setFormData] = useState({});

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // Envoyer les données
    await saveEmployee(formData);
    
    // Afficher le modal de confirmation
    setIsModalOpen(true);
    
    // Réinitialiser le formulaire
    setFormData({});
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        {/* Vos champs de formulaire */}
        <button type="submit">Sauvegarder</button>
      </form>

      <Modal 
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        message="Employé créé avec succès!"
      />
    </>
  );
}
```

## 🌐 Compatibilité

- ✅ React 16.8+ (avec Hooks)
- ✅ React 17.x
- ✅ React 18.x
- ✅ Tous les navigateurs modernes
- ✅ Mobile et Responsive

## 📱 Responsive

Le modal s'adapte automatiquement aux petits écrans :
- Padding réduit sur mobile
- Largeur adaptative
- Taille de police ajustée

## ♿ Accessibilité

- ✅ Fermeture au clic sur l'overlay
- ✅ Bouton de fermeture avec `aria-label`
- ✅ Prévention de la propagation des clics
- ✅ Animations respectueuses

## 🎬 Animations Incluses

1. **fadeIn** : L'overlay apparaît en fondu
2. **slideUp** : Le modal glisse du bas vers le haut
3. **checkmark** : L'icône apparaît avec un effet de zoom
4. **rotation** : Le bouton X tourne au survol

## 📦 Taille du Bundle

- **Minifié** : ~5KB
- **Gzippé** : ~2KB
- **Zéro dépendance** : Seulement React

## 🤝 Contribution

Les contributions sont les bienvenues ! N'hésitez pas à :
- Signaler des bugs
- Proposer de nouvelles fonctionnalités
- Soumettre des pull requests

## 📄 Licence

MIT © Araujo Manon

## 🔗 Liens

- [GitHub Repository](https://github.com/lapauze/react-green-modal)
- [npm Package](https://www.npmjs.com/package/@lapauze/react-green-modal)
- [Issues](https://github.com/lapauze/react-green-modal/issues)

## 💚 Remerciements

Merci d'utiliser React Green Modal !

Si vous aimez ce package, n'hésitez pas à lui donner une ⭐ sur GitHub !

---

**Fait avec 💚 par Araujo Manon (@lapauze)**