Découvrez comment nous pouvons créer des modaux entièrement personnalisés, accessibles et de meilleure qualité dans React à l'aide d'une API React appelée Portals.
Depuis le début du Web, créer des modaux ou d'autres types d'éléments flottants – comme un menu flottant – n'a jamais été une tâche facile du tout. Nous n’avions pas et n’avons toujours pas de manière sympa et absolument standard de créer ce type d’élément. Dans React, nous avions l'habitude de créer des modaux ou tout type d'élément flottant en utilisant de nombreuses approches: créer un composant simple et le rendre au-dessus de tout – mal, mais cela fonctionnait – et le personnaliser comme vous le souhaitez.
Maintenant, nous avons des portails dans React, et nous pouvons rendre des éléments en dehors de son composant parent. Cela signifie que créer des éléments comme des modaux n'a jamais été aussi simple! Alors, plongeons-nous et apprenons-en plus sur les portails et comment les utiliser.
Modaux
Dans chaque application de nos jours, nous pouvons avoir beaucoup de modaux. Nous les utilisons partout car ils sont si pratiques à construire et peuvent beaucoup s'améliorer dans notre interface utilisateur / UX. Les avantages de l'utilisation des modaux dans nos applications peuvent être:
- Ils nous permettent d'attirer l'attention de l'utilisateur sur un point spécifique, en affichant simplement un élément et en améliorant nos commentaires en fonction de ce que nous voulons.
- Nous pouvons les utiliser dans beaucoup de situations qui nécessitent plus d'attention de la part de l'utilisateur, comme les formulaires de connexion / inscription, les messages d'alerte, les actions rapides – comme un panier de commerce électronique – et certains messages contextuels.
Le problème avec les modaux dans React était: comment pouvons-nous les construire de la bonne façon? Dans React, jusqu'à la version 16, nous ne disposions d'aucune API ni d'une meilleure méthode standard pour créer et créer des modaux accessibles. Donc, beaucoup de développeurs ont inventé un tas de méthodes différentes essayant de réaliser la même chose: un modal accessible et facile à construire. Les développeurs ont essayé leur propre façon de les créer ou ont commencé à utiliser une bibliothèque d'interface utilisateur qui avait des options prédéfinies.
Depuis la sortie de la version 16 de React, nous avons des portails. Mais quels sont-ils exactement?
Fonctionnement des portails
Dans React, nous travaillons tout le temps avec des composants, et notre composant principal s'appelle la plupart du temps . Lorsque notre application est rendue, dans le DOM, le composant parent est appelé racine et il est rendu sous la forme d'un div afin que tous les composants enfants soient rendus à l'intérieur de cet élément.
Pour commencer à travailler w Avec Portails, utilisons react-dom pour créer une nouvelle application React. Dans votre terminal, exécutez la commande suivante:
create-react-app modals-in-react
Nous n'aurons besoin d'aucune dépendance pour travailler avec; nous avons juste besoin de la dernière version de React elle-même. Bien que Portals ait été introduit dans la 16e version, nous allons également utiliser React Hooks; nous avons donc besoin de la version 16.8.
Pour commencer, nous allons créer un hook personnalisé appelé useModal . Donc, créez un fichier appelé useModal.js et à l'intérieur de celui-ci, mettez le code suivant:
import {useState} de "react";
const useModal = () => {
const [open, onOpenModal] = useState (false);
const [close, onCloseModal] = useState (false);
const openModal = () => {
onOpenModal (true);
};
const closeModal = () => {
onCloseModal (true);
onOpenModal (false);
};
return {open, close, openModal, closeModal};
};
exporter par défaut useModal;
Maintenant, créons un composant appelé App.js qui va être notre composant principal, où nous allons gérer notre état modal. Dans notre App.js mettez le code suivant:
import React de "react";
const App = () => {
const {open, openModal, closeModal} = useModal ();
revenir (
Modals dans React!
);
};
exporter l'application par défaut;
C'est un composant simple qui a un bouton. Nous déstructurons également notre crochet personnalisé à l'intérieur de notre composant, mais nous n'avons encore aucune action. Maintenant, amusons-nous et commençons à créer notre portail.
Créez un fichier appelé Portal.js et à l'intérieur de ce fichier, importons deux choses:
import {useEffect} de "react" ;
import {createPortal} de "react-dom";
Tout d'abord, nous importons le crochet useEffect pour effectuer des effets secondaires dans notre fonction, puis le createPortal pour rendre notre élément en dehors du parent DOM.
Maintenant, créons une fonction de flèche appelée Portal et passons-lui un argument appelé enfants – qui va être un élément React valide – puis mettons le code suivant à l'intérieur:
const Portal = ({children}) => {
laissez modalRoot = document.getElementById ("modal");
...
};
Ici, nous obtenons un élément de notre arborescence DOM appelé modal . Mais nous n'avons pas encore d'élément appelé modal . Alors, maintenant, créons une instruction conditionnelle, qui va être comme ceci:
if (! ModalRoot) {
modalRoot = document.createElement ("div");
modalRoot.setAttribute ("id", "modal");
document.body.appendChild (modalRoot);
}
Très facile, il est conditionnel de tester si nous avons un élément appelé modal ; si c'est faux nous allons créer un nouvel élément, un div et nous lui attribuerons un identifiant « modal » et l'ajouterons à notre corps .
Ensuite, nous allons créer un élément appelé modalElement et à l'intérieur de notre crochet useEffect nous allons ajouter à notre modalRoot div . Ainsi, le reste de notre fonction sera comme ceci:
const modalElement = document.createElement ("div");
useEffect (() => {
modalRoot.appendChild (modalElement);
return () => modalRoot.removeChild (modalElement);
});
return createPortal (enfants, modalElement);
Maintenant, notre fonction Portal devrait ressembler à ceci:
const Portal = ({children}) => {
laissez modalRoot = document.getElementById ("modal");
if (! modalRoot) {
modalRoot = document.createElement ("div");
modalRoot.setAttribute ("id", "modal");
document.body.appendChild (modalRoot);
}
const modalElement = document.createElement ("div");
useEffect (() => {
modalRoot.appendChild (modalElement);
return () => modalRoot.removeChild (modalElement);
});
return createPortal (enfants, modalElement);
};
Création de notre modal stylisé
Après avoir créé notre portail nous devons créer notre style modal et utiliser la fonction Portal que nous avons créée pour rendre nos éléments. Donc, créez un fichier appelé Modal.js et à l'intérieur de ce fichier, importez le Portal que nous avons créé ci-dessus et ajoutez le code suivant:
import React from "react" ;
importer le portail depuis "./Portal";
const Remodal = ({enfants, fermer, rendre}) => {
revenir (
{render (enfants) || enfants}
);
};
exporter Remodal par défaut;
Nous importons notre portail et à l'intérieur de celui-ci, nous utilisons des divs et le stylisons avec du CSS en ligne, afin que nous puissions voir nos résultats très clairement.
Pour terminer notre modal et le voir fonctionner, allons à notre composant App.js et importons notre composant modal. Nous allons utiliser une autre instruction conditionnelle ici, de sorte que lorsque nous cliquons sur le bouton, nous allons changer notre état ouvert sur true et cela va ouvrir le modal. Lorsque nous cliquons sur le bouton de fermeture, nous allons fermer le modal. Notre composant App.js ressemblera à ceci:
import React de "react";
importer Modal depuis "./Modal";
importez useModal depuis "./useModal";
const App = () => {
const {open, openModal, closeModal} = useModal ();
revenir (
Modals dans React!
{ouvert ? (
Ceci est un modal utilisant des portails!
}
/>
) : nul}
);
};
exporter l'application par défaut;
Maintenant, nous avons un bon fonctionnement modal en utilisant l'API Portal, et nous venons de créer trois fichiers! Vous pouvez créer des modaux meilleurs et plus accessibles, et également les styler comme vous le souhaitez – tout ce dont vous avez besoin est votre imagination.
Création d'applications riches avec KendoReact
Si vous ne voulez pas créer des modaux à partir de zéro, vous pouvez utilisez une bibliothèque d'interface utilisateur, et je vous recommande fortement d'essayer KendoReact . Il s'agit d'une bibliothèque de composants d'interface utilisateur complète pour React, construite avec des composants réactifs et de haute qualité.
Il comprend tous les composants dont vous avez besoin, d'une application de base à une application complexe, donc avec KendoReact vous pouvez vous concentrer sur ce qui compte dans votre et arrêtez d'essayer de créer des composants d'interface utilisateur complexes.
Conclusion
Dans cet article, nous avons découvert les modaux et comment les construire facilement dans React à l'aide de Portals. Avec les portails, nous pouvons rendre les éléments en dehors de l'élément parent assez facilement, en le rendant au-dessus de tout. Si vous voulez en savoir plus sur les portails, je vous recommande fortement de créer de nombreux modaux personnalisés et menus flottants pour savoir comment vous pouvez bénéficier de cette API et créer des applications étonnantes en l'utilisant.
Source link