Théorie

Le composant Modal est utilisé pour présenter du contenu et des éléments interactifs superposés au reste du contenu de l'application. Il apparaît généralement sous la forme d'une boîte de dialogue contextuelle ou d'une superposition au-dessus du contenu principal, interrompant temporairement le flux de travail de l'utilisateur.

Pourquoi en avons-nous besoin ?

1. Présentation du contenu :
   • Fournit un moyen d'afficher du contenu ou des fonctionnalités supplémentaires sans quitter l'écran actuel ;
   • Utile pour présenter des boîtes de dialogue, des alertes, des notifications ou tout contenu nécessitant une interaction ou une attention de l'utilisateur.
2. Attirer l'attention :
   • Peut être utilisé pour attirer l'attention sur des informations, des actions ou des invites spécifiques ;
   • Vous permet de contrôler l'attention de l'utilisateur et de le guider à travers le flux de travail de l'application.
3. Interaction contextuelle :
   • Permet des interactions contextuelles en présentant du contenu ou des options connexes en fonction des actions de l'utilisateur ou de l'état de l'application.

Comment travailler avec Modal

• Le composant Modal est contrôlé par ses props et son état;
• Nous pouvons basculer la visibilité du modal en définissant sa prop visible à true ou false;
• Utilisez la prop onRequestClose pour spécifier une fonction qui sera appelée lorsque l'utilisateur tentera de fermer le modal.

Exemple

Résultat

En Pratique