Next Modal Component

Ce composant offre une modal simple, flexible et hautement personnalisable pour vos applications Next.js.

Installation

npm install [next-modal-component] --save

Utilisation

Pour utiliser le composant Modal, importez-le simplement dans votre fichier et utilisez-le comme n'importe quel autre composant React :

import Modal from "[next-modal-component]";

1<Modal
2    isOpen={isOpen}
3    onClose={handleClose}
4    title="Votre titre ici"
5    content="Votre contenu ici"
6    textColor="La couleur du texte choisi"
7	modalWidth="largeur du modal voulu"
8    backgroundColor="couleur arriere plan"
9    borderColor="couleur de la bordure"
10    titleFontSize="Taille des caractères du titre"
11    contentFontSize="Taille des caractères du paragraphe"
12	content="le contenu souhaité"
13	contentAlign="gauche centre droite"
14    closeBtnStyle={}   />

Props

Le composant Modal accepte les props suivantes :

1. isOpen (booléen, requis) : Indique si la modal doit être affichée ou non.

2. onClose (fonction, requis) : Fonction qui sera appelée lorsque l'utilisateur tente de fermer la modal.

3. content (élément JSX/string, requis) : Le contenu à afficher dans la modal.

4. title (string, requis) : Le titre à afficher en haut de la modal.

5. textColor (string, optionnel, valeur par défaut: "black") : La couleur du texte dans la modal.

6. backgroundColor (string, optionnel, valeur par défaut: "white") : La couleur d'arrière-plan de la modal.

7. borderColor (string, optionnel, valeur par défaut: "red") : La couleur de la bordure de la modal.

8. titleFontSize (string, optionnel, valeur par défaut: "24px") : La taille de la police du titre.

9. contentFontSize (string, optionnel, valeur par défaut: "16px") : La taille de la police du contenu.

10. contentAlign (string, optionnel, valeur par défaut: "left") : L'alignement du texte du contenu. Les valeurs acceptées sont "left", "right", "center", et "justify".

11. modalWidth (string, optionnel, valeur par défaut: "70%") : La largeur de la modal.

12. customStyles (objet, optionnel) : Styles personnalisés pour la modal. Les sous-objets acceptés sont:

• header: Styles appliqués à l'en-tête de la modal.
• content: Styles appliqués au contenu de la modal.
• overlay: Styles appliqués à l'arrière-plan/overlay de la modal.
• modal: Styles appliqués à la modal elle-même.
• closeBtnStyle (objet, optionnel) : Styles appliqués au bouton de fermeture de la modal.

Personnalisation

Vous pouvez personnaliser la modal en passant des styles spécifiques via les props. Par exemple :

1<Modal
2	isOpen={isConfirmationOpen}
3	onClose={() => setConfirmationOpen(false)}
4	title="Employee Created!"
5	textColor="red"
6	modalWidth="50%"
7	backgroundColor="black"
8	borderColor="#0cc7ba"
9	titleFontSize="30px"
10	contentFontSize="18px"
11	content=""
12	contentAlign="center"
13	closeBtnStyle={{ color: "white", fontSize: "20px" }}
14	customStyles={{
15		header: { padding: "20px" },
16		content: { fontWeight: "bold" },
17		overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
18		modal: { boxShadow: "0 0 10px rgba(0, 0, 0, 0.3)" },
19	}}
20/>

Licence

MIT