Utilisation des modales React-Bootstrap dans les applications React

1. Bootstrap 3 modales dans React
2. Bootstrap 4 et 5 modales dans React

Vous avez probablement déjà rencontré des modales. Ils ressemblent à des fenêtres contextuelles et apparaissent après que vous ayez cliqué sur un bouton spécifique ou effectué une autre action. Vous pouvez également les intégrer dans vos propres applications React.

Lorsqu’ils sont utilisés correctement, les modales peuvent améliorer l’expérience utilisateur d’une application React.

Ils sont très efficaces pour attirer l’attention des utilisateurs sur une fonctionnalité essentielle du site Web ou pour obtenir leur avis. Par exemple, si votre utilisateur a accidentellement cliqué pour supprimer un élément important de l’interface utilisateur, vous pouvez utiliser un modal pour lui demander s’il est sûr de son choix.

Lors du développement d’une application React, vous pouvez créer un composant Modal personnalisé à l’aide de JavaScript, HTML et CSS standard. Cependant, à moins que vous ne soyez sûr d’avoir besoin d’une solution personnalisée, vous pouvez gagner beaucoup de temps en utilisant un modal d’une bibliothèque d’interface utilisateur comme Bootstrap.

Bootstrap 3 modales dans React

React-Bootstrap est une version de la bibliothèque populaire ajustée pour React. Il fournit des composants React personnalisés avec les mêmes fonctionnalités et fonctionnalités que celles que vous attendez de la version 3 d’origine de Bootstrap.

L’utilisation d’une bibliothèque comme React-Bootstrap vous permet d’utiliser des éléments d’interface utilisateur courants sans les écrire à partir de zéro.

Un composant Modal importé de cette bibliothèque fournit toutes les fonctionnalités dont vous pourriez avoir besoin. Une fois que vous l’avez importé, vous n’avez plus besoin d’aller à l’encontre des modèles de React et de muter directement le DOM.

Vous pouvez l’installer en ouvrant le shell et en tapant la commande suivante :

npm install react-bootstrap

La meilleure partie de la bibliothèque react-bootstrap est qu’elle peut importer des composants individuels séparément. De cette façon, vous pouvez minimiser la taille du package et accélérer le chargement de votre application.

Le moyen le plus simple d’inclure un modal de la bibliothèque React-Bootstrap est de déclarer une instruction import en haut de votre application :

import Modal from 'react-bootstrap/Modal';

Le seul inconvénient de la bibliothèque React-Bootstrap est qu’elle ne prend en charge que Bootstrap 3.

La bibliothèque React-Bootstrap vous donne beaucoup de liberté pour personnaliser l’apparence et les fonctionnalités du composant Modal. Vous pouvez ajuster son animation, sa position dans le navigateur et sa taille, pour n’en nommer que quelques-uns. Apprenez-en plus sur les modales React-Bootstrap en lisant le guide officiel.

Bootstrap 4 et 5 modales dans React

Si vous souhaitez utiliser Bootstrap 4 ou la version plus récente 5, votre meilleure option est d’utiliser le package react-strap. Comme ce package n’a pas ses styles, vous devez installer le package de base bootstrap et importer son fichier CSS.

Pour installer le package react-strap, vous devez ouvrir la ligne de commande et saisir le code suivant :

npm install reactstrap

Une fois l’installation terminée, vous pouvez importer le composant Modal dans votre application. Voici un exemple :

import React from 'react';
import { Modal } from 'reactstrap';

Le composant Modal est construit spécifiquement pour React. Vous pouvez personnaliser son comportement en utilisant des accessoires tels que isOpen, toggle et size. Vous pouvez même choisir d’activer ou de désactiver l’animation de fondu.

Le paquet react-strap vous donne beaucoup de liberté pour personnaliser le comportement de ses composants. Pour en savoir plus sur les options à votre disposition, consultez la documentation officielle react-strap.