react-smart-modal

Une librairie React minimaliste, stylée avec Tailwind CSS, permettant d'afficher des modales accessibles, centrées et facilement intégrables dans tout projet moderne.

🚀 Installation

npm install @dev87/react-smart-modal

ou

yarn add @dev87/react-smart-modal

📦 Utilisation de base

import { Modal } from '@dev87/react-smart-modal'
import '@dev87/react-smart-modal/style.css'

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Titre de la modale"
  description="Description courte"
>
  <p>Contenu HTML ou JSX ici</p>
</Modal>

🧰 Props

| Prop | Type | Description | |--------------|------------|-----------------------------------------------------------| | isOpen | boolean | Contrôle l'affichage de la modale | | onClose | function | Fonction appelée lors de la fermeture | | title | string | Titre affiché en en-tête de modale | | description| string | Description courte (aria-describedby) | | size | string | 'sm', 'md' (défaut), 'lg', 'xl' | | position | string | 'center' (défaut), 'top' |

🧪 Exemple avancé

<Modal
  isOpen={open}
  onClose={() => setOpen(false)}
  title="Suppression"
  size="lg"
  position="top"
>
  <p>Êtes-vous sûr de vouloir supprimer cet élément ?</p>
  <div className="flex justify-end gap-2 mt-4">
    <button onClick={() => setOpen(false)}>Annuler</button>
    <button className="bg-red-600 text-white px-4 py-2 rounded">Confirmer</button>
  </div>
</Modal>

🎨 Style

• Basé sur Tailwind CSS (peer, transition, backdrop-blur, etc.)
• Responsive & dark-mode compatible
• Focus trap, esc to close, clic extérieur

📊 Performances

| Lib | Taille (gzippée) | |------------------|------------------| | react-smart-modal | ~3.2 KB | | react-modal | ~6.1 KB |

✅ Accessibilité

• Aria-compliant
• Focus management
• Navigable au clavier
• Clics extérieurs gérés

🔧 Développement

npm install
npm run dev

📘 Documentation API (à venir)

La documentation complète des props sera disponible sur GitHub Pages ou en .md.

📄 Licence

MIT – [2025] @dev87