OC Modal

Un package de composant modal React pour le projet OpenClassrooms.

Installation

npm install oc-modal-willfda

ou avec pnpm :

pnpm add oc-modal-willfda

Utilisation

import React, { useState } from 'react';
import Modal from 'oc-modal-willfda';

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>
        Ouvrir la modal
      </button>
      
      <Modal
        open={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <h2>Titre de la modal</h2>
        <p>Contenu de votre modal ici...</p>
      </Modal>
    </div>
  );
}

Props

| Prop | Type | Requis | Défaut | Description | |------|------|--------|---------|-------------| | open | boolean | ✅ | - | Contrôle l'ouverture/fermeture de la modal | | onClose | () => void | ✅ | - | Fonction appelée lors de la fermeture | | children | React.ReactNode | ✅ | - | Contenu à afficher dans la modal | | closeIcon | React.ReactNode | ❌ | <X /> | Icône personnalisée pour fermer | | closePosition | 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' | ❌ | 'top-right' | Position prédéfinie du bouton de fermeture | | customPosition | string | ❌ | - | Classes CSS personnalisées pour positionner le bouton |

Exemples

Modal basique

<Modal open={isOpen} onClose={() => setIsOpen(false)}>
  <h1>Ma modal</h1>
  <p>Ceci est le contenu de ma modal.</p>
</Modal>

Avec icône personnalisée

import { ChevronDown } from 'lucide-react';

<Modal 
  open={isOpen} 
  onClose={() => setIsOpen(false)}
  closeIcon={<ChevronDown size={24} />}
>
  <h1>Modal avec icône personnalisée</h1>
</Modal>

Position du bouton de fermeture

<Modal 
  open={isOpen} 
  onClose={() => setIsOpen(false)}
  closePosition="bottom-left"
>
  <h1>Bouton en bas à gauche</h1>
</Modal>

Position personnalisée

<Modal 
  open={isOpen} 
  onClose={() => setIsOpen(false)}
  customPosition="top-4 left-4 bg-red-500 p-2 rounded"
>
  <h1>Position entièrement personnalisée</h1>
</Modal>

Caractéristiques

• ✅ Moderne : Utilise l'élément HTML natif <dialog>
• ✅ Portal React : Rendu en dehors de la hiérarchie DOM
• ✅ TypeScript : Support complet avec types exportés
• ✅ Accessible : Gestion native du focus et de l'accessibilité
• ✅ Personnalisable : Icône et position du bouton configurables
• ✅ Léger : Dépendances minimales

Compatibilité

• React >= 17
• Support des navigateurs modernes (ES2020)

Développement

# Installation des dépendances
pnpm install

# Mode développement avec watch
pnpm run dev

# Build de production
pnpm run build

# Vérification des types
pnpm run typecheck

Licence

MIT

Auteur

William

Liens

• Repository GitHub
• Issues