samamrani-modal
v0.1.8
Published
Ce dépôt contient un composant React pour une fenêtre modale. Le composant modale affiche une fenêtre centrée avec une option pour la fermer en cliquant en dehors de la modale ou en appuyant sur la touche 'Échap'. Le composant est conçu pour être réutilis
Downloads
376
Readme
Composant Modal
Ce dépôt contient un composant React pour une fenêtre modale. Le composant modale affiche une fenêtre centrée avec une option pour la fermer en cliquant en dehors de la modale ou en appuyant sur la touche 'Échap'. Le composant est conçu pour être réutilisable et personnalisable.
Installation
Pour installer le composant Modal dans votre projet, utilisez npm
npm install samamrani-modal
Si vous souhaitez installer depuis GitHub, utilisez :
npm install github:samamrani/modal-projet14
Développement Pour contribuer ou apporter des modifications, clonez le dépôt :
git clone https://github.com/samamrani/modal-projet14 cd modal-projet14 npm install npm start
Utilisation Voici comment utiliser le composant Modal dans votre projet React : import React, { useState } from 'react'; import Modal from 'samamrani-modal';
function App() { const [isModalOpen, setIsModalOpen] = useState(false);
return ( <button onClick={() => setIsModalOpen(true)}>Open Modal <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}> Modal Content ); }
export default App;
Personnalisation des Styles
Pour personnaliser les styles de la modale, vous pouvez ajouter des classes CSS à l'élément de la modale via la prop className
. Voici comment vous pouvez le faire :
import React from 'react'; import { Modal } from 'samamrani-modal'; import './custom-modal.css';
const CustomModal = () => ( <Modal isOpen={true} onClose={() => {}} className="my-custom-class"> Contenu de la modale );
export default CustomModal;
Vérifiez et Publiez
Assurez-vous que tout fonctionne correctement :
- Testez le composant localement.
- Vérifiez que la configuration Webpack est correcte.
Publiez sur npm :
- Assurez-vous que vous êtes connecté à npm avec
npm login
. - Publiez le paquet avec
npm publish
.
- Assurez-vous que vous êtes connecté à npm avec