🎨 React Green Modal

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

Créé par Araujo Manon (@lapauze)

✨ 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

npm install @lapauze/react-green-modal

ou avec yarn :

yarn add @lapauze/react-green-modal

🚀 Utilisation Basique

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)

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

Exemple 2 : Modal avec icône personnalisée

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

Exemple 3 : Modal d'erreur

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

Exemple 4 : Modal de félicitations

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

Exemple 5 : Avec classes personnalisées

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

/* 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

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
• npm Package
• 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)