Next-modal-component NPM

Next Modal Component

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

Installation

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";

<Modal
    isOpen={isOpen}
    onClose={handleClose}
    title="Votre titre ici"
    content="Votre contenu ici"
    textColor="La couleur du texte choisi"
	modalWidth="largeur du modal voulu"
    backgroundColor="couleur arriere plan"
    borderColor="couleur de la bordure"
    titleFontSize="Taille des caractères du titre"
    contentFontSize="Taille des caractères du paragraphe"
	content="le contenu souhaité"
	contentAlign="gauche centre droite"
    closeBtnStyle={}   />

Props

Le composant Modal accepte les props suivantes :

isOpen (booléen, requis) : Indique si la modal doit être affichée ou non.
onClose (fonction, requis) : Fonction qui sera appelée lorsque l'utilisateur tente de fermer la modal.
content (élément JSX/string, requis) : Le contenu à afficher dans la modal.
title (string, requis) : Le titre à afficher en haut de la modal.
textColor (string, optionnel, valeur par défaut: "black") : La couleur du texte dans la modal.
backgroundColor (string, optionnel, valeur par défaut: "white") : La couleur d'arrière-plan de la modal.
borderColor (string, optionnel, valeur par défaut: "red") : La couleur de la bordure de la modal.
titleFontSize (string, optionnel, valeur par défaut: "24px") : La taille de la police du titre.
contentFontSize (string, optionnel, valeur par défaut: "16px") : La taille de la police du contenu.
contentAlign (string, optionnel, valeur par défaut: "left") : L'alignement du texte du contenu. Les valeurs acceptées sont "left", "right", "center", et "justify".
modalWidth (string, optionnel, valeur par défaut: "70%") : La largeur de la modal.
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 :

<Modal
	isOpen={isConfirmationOpen}
	onClose={() => setConfirmationOpen(false)}
	title="Employee Created!"
	textColor="red"
	modalWidth="50%"
	backgroundColor="black"
	borderColor="#0cc7ba"
	titleFontSize="30px"
	contentFontSize="18px"
	content=""
	contentAlign="center"
	closeBtnStyle={{ color: "white", fontSize: "20px" }}
	customStyles={{
		header: { padding: "20px" },
		content: { fontWeight: "bold" },
		overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
		modal: { boxShadow: "0 0 10px rgba(0, 0, 0, 0.3)" },
	}}
/>