Comment créer vos propres hooks React : un guide étape par étape

Les hooks React personnalisés sont un outil essentiel qui vous permet d'ajouter des fonctionnalités spéciales et uniques à vos applications React.

Dans de nombreux cas, si vous souhaitez ajouter une certaine fonctionnalité à votre application, vous pouvez simplement installer une bibliothèque tierce conçue pour résoudre votre problème. Mais si une telle bibliothèque ou un tel hook n'existe pas, que faites-vous ?

En tant que développeur React, il est important d'apprendre le processus de création de hooks personnalisés pour résoudre des problèmes ou ajouter des fonctionnalités manquantes dans vos propres projets React.

Dans ce guide étape par étape, je vais vous montrer comment créer vos propres hooks React personnalisés en décomposant trois hooks que j'ai créés pour mes propres applications, ainsi que les problèmes pour lesquels ils ont été créés.

1. useCopyToClipboard Hook Sur une ancienne version de mon site Web, reedbarger.com, j'autorisais les utilisateurs à copier le code de mes articles à l'aide d'un package appelé réagir-copie-to-clipboard.

Un utilisateur survole simplement l'extrait, clique sur le bouton du presse-papiers et le code est ajouté au presse-papiers de son ordinateur pour lui permettre de coller et d'utiliser le code où il le souhaite.

copie-gif.gif
Cependant, au lieu d'utiliser une bibliothèque tierce, je souhaitais recréer cette fonctionnalité avec mon propre hook React personnalisé. Comme pour chaque hook de réaction personnalisé que je crée, je lui mets un dossier dédié, généralement appelé utils ou lib, spécifiquement pour les fonctions que je peux réutiliser dans mon application.

Nous mettrons ce hook dans un fichier appelé useCopyToClipboard.js et je créerai une fonction du même nom.

Il existe différentes manières de copier du texte dans le presse-papiers de l'utilisateur. Je préfère utiliser pour cela une bibliothèque, qui rend le processus plus fiable, appelée copie dans le presse-papiers.

Il exporte une fonction, que nous appellerons copie.

// utils/useCopyToClipboard.js
importer React depuis "react";
importer une copie depuis "copier dans le presse-papiers" ;

exporter la fonction par défaut useCopyToClipboard() {}
Ensuite, nous allons créer une fonction qui sera utilisée pour copier le texte que vous souhaitez ajouter au presse-papiers de l'utilisateur. Nous appellerons cette fonction handleCopy.

Comment créer la fonction handleCopy
Au sein de la fonction, nous devons d'abord nous assurer qu'elle n'accepte que les données de type chaîne ou nombre. Nous allons configurer une instruction if-else, qui garantira que le type est soit une chaîne, soit un nombre. Sinon, nous enregistrerons une erreur dans la console indiquant à l'utilisateur que vous ne pouvez pas copier d'autres types.

importer React depuis "react" ;
importer une copie depuis "copier dans le presse-papiers" ;

exporter la fonction par défaut useCopyToClipboard() {
const [isCopied, setCopied] = React.useState(false);

fonction handleCopie(texte) {
if (typeof text === "string" || typeof text == "number") {
// copie
} autre {
// ne copie pas
console.erreur(
Impossible de copier le type de ${typeof text} dans le presse-papiers, il doit s'agir d'une chaîne ou d'un nombre.
);
>
>
>
Ensuite, nous prenons le texte et le convertissons en chaîne, que nous transmettrons ensuite à la fonction de copie. À partir de là, nous renvoyons la fonction handleCopy du hook là où nous le souhaitons dans notre application.

Généralement, la fonction handleCopy sera connectée à un onClick d'un bouton.

importer React depuis "react" ;
importer une copie depuis "copier dans le presse-papiers" ;

exporter la fonction par défaut useCopyToClipboard() {
fonction handleCopie (texte) {
if (typeof text === "string" || typeof text == "number") {
copier(text.toString());
} autre {
console.erreur(
Impossible de copier le type de ${typeof text} dans le presse-papiers, il doit s'agir d'une chaîne ou d'un nombre.
);
>
>

poignée de retourCopie ;
>
De plus, nous voulons un état indiquant si le texte a été copié ou non. Pour créer cela, nous appellerons useState en haut de notre hook et créerons une nouvelle variable d'état isCopied, où le setter sera appelé setCopy.

Au départ, cette valeur sera fausse. Si le texte est copié avec succès, nous définirons la copie sur true. Sinon, nous le définirons sur false.

Enfin, nous renverrons isCopied à partir du hook dans un tableau avec handleCopy.

importer React depuis "react" ;
importer une copie depuis "copier dans le presse-papiers" ;

exporter la fonction par défaut useCopyToClipboard(resetInterval = null) {
const [isCopied, setCopied] = React.useState(false);

fonction handleCopie(texte) {
if (typeof text === "string" || typeof text == "number") {
copier(text.toString());
setCopié(true);
} autre {
setCopied(false);
console.erreur(
Impossible de copier le type de ${typeof text} dans le presse-papiers, il doit s'agir d'une chaîne ou d'un nombre.
);
>
>

return [isCopied, handleCopy];
>
Comment utiliser useCopyToClipboard
Nous pouvons désormais utiliser useCopyToClipboard dans n'importe quel composant que nous aimons.

Dans mon cas, je vais l'utiliser avec un composant de bouton de copie qui a reçu le code de notre extrait de code.

Pour que cela fonctionne, tout ce que nous avons à faire est d'ajouter un clic sur le bouton. Et en retour d'une fonction appelée handle copy avec le code qui lui est demandé sous forme de texte. Et une fois copié, c'est vrai. Nous pouvons afficher une icône différente indiquant qu'une copie a réussi.

importer React depuis "react" ;
importer ClipboardIcon depuis "../svg/ClipboardIcon";
importer SuccessIcon depuis "../svg/SuccessIcon";
importer useCopyToClipboard depuis "../utils/useCopyToClipboard";

fonction CopyButton({ code }) {
const [isCopied, handleCopy] = useCopyToClipboard();

retour (
handleCopie(code)}>
{estCopié ? : >

);
>
Comment ajouter un intervalle de réinitialisation
Il y a une amélioration que nous pouvons apporter à notre code. Comme nous avons actuellement écrit notre hook, isCopied sera toujours vrai, ce qui signifie que nous verrons toujours l'icône de réussite :

succès-gif.gif
Si nous voulons réinitialiser notre état après quelques secondes, vous pouvez passer un intervalle de temps pour utiliser CopyToClipboard. Ajoutons cette fonctionnalité.

De retour dans notre hook, nous pouvons créer un paramètre appelé resetInterval, dont la valeur par défaut est null, qui garantira que l'état ne sera pas réinitialisé si aucun argument ne lui est passé.

Nous ajouterons ensuite useEffect pour dire que si le texte est copié et que nous avons un intervalle de réinitialisation, nous remettrons isCopied à false après cet intervalle en utilisant un setTimeout.

De plus, nous devons effacer ce délai d'attente si notre composant dont le hook est utilisé lors du démontage (ce qui signifie que notre état n'est plus là pour se mettre à jour).

importer React depuis "react" ;
importer une copie depuis "copier dans le presse-papiers" ;

exporter la fonction par défaut useCopyToClipboard(resetInterval = null) {
const [isCopied, setCopied] = React.useState(false);

const handleCopy = React.useCallback((text) => {
if (typeof text === "string" || typeof text == "number") {
copie(text.toString());
setCopié(true);
} autre {
setCopied(false);
console.erreur(
Impossible de copier le type de ${typeof text} dans le presse-papiers, il doit s'agir d'une chaîne ou d'un nombre.
);
>
}, []);

React.useEffect(() => {
laisser expirer ;
if (isCopied && resetInterval) {
timeout = setTimeout(() => setCopied(false), resetInterval);
>
return () => {
clearTimeout(timeout);
};
}, [isCopied, resetInterval]);

return [isCopied, handleCopy];
>
Enfin, la dernière amélioration que nous pouvons apporter est d'envelopper handleCopy dans le hook useCallback afin de garantir qu'il ne sera pas recréé à chaque fois qu'il y aura un nouveau rendu.

Résultat final
Et avec cela, nous avons notre dernier hook qui permet de réinitialiser l’état après un intervalle de temps donné. Si nous lui en transmettons un, nous devrions voir un résultat comme celui que nous avons ci-dessous.

importer React depuis "react" ;
importer ClipboardIcon depuis "../svg/ClipboardIcon";
importer SuccessIcon depuis "../svg/SuccessIcon";
importer useCopyToClipboard depuis "../utils/useCopyToClipboard";

fonction CopyButton({ code }) {
// isCopied est réinitialisé après un délai d'attente de 3 secondes
const [isCopied, handleCopy] = useCopyToClipboard(3000);

retour (
handleCopie(code)}>
{estCopié ? : >

);
>
résultat-final.gif

1. utiliserPageBottom Hook Dans les applications React, il est parfois important de savoir quand votre utilisateur a fait défiler vers le bas d'une page.

Dans les applications où vous avez un défilement infini, comme Instagram par exemple, une fois que l'utilisateur atteint le bas de la page, vous devez récupérer plus de publications.

Défilement infini dans Instagram
Voyons comment créer nous-mêmes un hook usePageBottom pour des cas d'utilisation similaires, comme la création d'un défilement infini.

Nous commencerons par créer un fichier séparé, usePageBottom.js, dans notre dossier utils et nous ajouterons une fonction (hook) du même nom :

// utils/usePageBottom.js
importer React depuis "react";

exporter la fonction par défaut usePageBottom() {}

Ensuite, nous devrons calculer le moment où notre utilisateur atteint le bas de la page. Nous pouvons le déterminer avec les informations de la fenêtre. Pour y accéder, nous allons devoir nous assurer que notre composant dans lequel le hook est appelé est monté, nous utiliserons donc le hook useEffect avec un tableau de dépendances vide.

// utils/usePageBottom.js
importer React depuis "react";

exporter la fonction par défaut usePageBottom() {
React.useEffect(() => {}, []);
>

L'utilisateur aura fait défiler vers le bas de la page lorsque la valeur innerHeight de la fenêtre plus la valeur scrollTop du document est égale à offsetHeight. Si ces deux valeurs sont égales, le résultat sera vrai et l'utilisateur aura fait défiler la page jusqu'en bas :

// utils/usePageBottom.js
importer React depuis "react";

exporter la fonction par défaut usePageBottom() {
React.useEffect(() => {
window.innerHeight + document.documentElement.scrollTop ===
document.documentElement.offsetHeight;
}, []);
>

Nous stockerons le résultat de cette expression dans une variable, isBottom et nous mettrons à jour une variable d'état appelée bottom, que nous renverrons finalement depuis notre hook.

// utils/usePageBottom.js
importer React depuis "react";

exporter la fonction par défaut usePageBottom() {
const [bas, setBottom] = React.useState(false);

React.useEffect(() => {
const estBottom =
window.innerHeight + document.documentElement.scrollTop ===
document.documentElement.offsetHeight;
setBottom(isButton);
}, []);

retour en bas ;
>

Notre code tel quel ne fonctionnera cependant pas. Pourquoi pas ?

Le problème réside dans le fait que nous devons calculer isBottom chaque fois que l'utilisateur fait défiler. En conséquence, nous devons écouter un événement de défilement avec window.addEventListener. Nous pouvons réévaluer cette expression en créant une fonction locale à appeler chaque fois que l'utilisateur fait défiler, appelée handleScroll.

// utils/usePageBottom.js
importer React depuis "react";

exporter la fonction par défaut usePageBottom() {
const [bas, setBottom] = React.useState(false);

React.useEffect(() => {
fonction handleScroll() {
const estBottom =
window.innerHeight + document.documentElement.scrollTop
=== document.documentElement.offsetHeight;
setBottom(isButton);
>
window.addEventListener("scroll", handleScroll);
}, []);

retour en bas ;
>

Enfin, puisque nous avons un écouteur d'événement qui met à jour l'état, nous devons gérer l'événement selon lequel notre utilisateur quitte la page et notre composant est supprimé. Nous devons supprimer l'écouteur d'événements de défilement que nous avons ajouté, afin de ne pas tenter de mettre à jour une variable d'état qui n'existe plus.

Nous pouvons le faire en renvoyant une fonction de useEffect avec window.removeEventListener, où nous transmettons une référence à la même fonction handleScroll. Et nous avons terminé.

// utils/usePageBottom.js
importer React depuis "react";

exporter la fonction par défaut usePageBottom() {
const [bas, setBottom] = React.useState(false);

React.useEffect(() => {
fonction handleScroll() {
const estBottom =
window.innerHeight + document.documentElement.scrollTop
=== document.documentElement.offsetHeight;
setBottom(isButton);
>
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);

retour en bas ;
>

Maintenant, nous pouvons simplement appeler ce code dans n'importe quelle fonction où nous voulons savoir si nous avons atteint le bas de la page ou non.

Dans mon site Gatsby, j'ai un en-tête, et à mesure que je diminue la taille de la page, je souhaite afficher moins de liens.

redimensionner la fenêtre pour afficher l'en-tête
Pour ce faire, nous pourrions utiliser une requête multimédia (CSS), ou nous pourrions utiliser un hook React personnalisé pour nous donner la taille actuelle de la page et masquer ou afficher les liens dans notre JSX.

Auparavant, j'utilisais un hook d'une bibliothèque appelée React-use. Au lieu d'apporter une bibliothèque tierce entière, j'ai décidé de créer mon propre crochet qui fournirait les dimensions de la fenêtre, à la fois en largeur et en hauteur. J'ai appelé ce hook useWindowSize.

Comment créer le crochet
Tout d’abord, nous allons créer un nouveau fichier .js dans notre dossier utilitaires (utils), du même nom que le hook useWindowSize. J'importerai React (pour utiliser des hooks) tout en exportant le hook personnalisé.

// utils/useWindowSize.js

importer React depuis "react" ;

exporter la fonction par défaut useWindowSize() {}

Maintenant, puisque j'utilise ceci dans un site Gatsby, qui est rendu par le serveur, je dois obtenir la taille de la fenêtre. Mais nous n’y aurons peut-être pas accès car nous sommes sur le serveur.

Pour vérifier et s'assurer qu'on n'est pas sur le serveur, on peut voir si le type de fenêtre n'est pas égal à la chaîne undefined.

Auquel cas nous pouvons revenir à une largeur et une hauteur par défaut pour un navigateur, disons 1200 et 800 au sein d'un objet :

// utils/useWindowSize.js

importer React depuis "react" ;

exporter la fonction par défaut useWindowSize() {
if (typeof window !== "undefined") {
return { largeur : 1200, hauteur : 800 };
>
>

Comment obtenir la largeur et la hauteur de la fenêtre
Et en supposant que nous sommes sur le client et que nous pouvons obtenir la fenêtre, nous pouvons utiliser le hook useEffect pour effectuer un effet secondaire en interagissant avec la fenêtre. Nous inclurons un tableau de dépendances vide pour nous assurer que la fonction d'effet n'est appelée qu'une fois le composant (dans lequel ce hook est appelé) est monté.

Pour connaître la largeur et la hauteur de la fenêtre, nous pouvons ajouter un écouteur d'événement et écouter l'événement de redimensionnement. Et chaque fois que la taille du navigateur change, nous pouvons mettre à jour un élément d'état (créé avec useState), que nous appellerons windowSize, et le paramètre pour le mettre à jour sera setWindowSize.

// utils/useWindowSize.js

importer React depuis "react" ;

exporter la fonction par défaut useWindowSize() {
if (typeof window !== "undefined") {
return { largeur : 1200, hauteur : 800 };
>

const [windowSize, setWindowSize] = React.useState();

React.useEffect(() => {
window.addEventListener("resize", () => {
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
});
}, []);
>

Lorsque la fenêtre est redimensionnée, le rappel sera appelé et l'état windowSize sera mis à jour avec les dimensions actuelles de la fenêtre. Pour l'obtenir, nous définissons la largeur sur window.innerWidth et la hauteur sur window.innerHeight.

Comment ajouter le support SSR
Cependant, le code tel que nous l’avons ici ne fonctionnera pas. En effet, une règle clé des hooks est qu’ils ne peuvent pas être appelés de manière conditionnelle. Par conséquent, nous ne pouvons pas avoir de condition au-dessus de notre hook useState ou useEffect avant qu’ils ne soient appelés.

Donc, pour résoudre ce problème, nous définirons la valeur initiale de useState de manière conditionnelle. Nous allons créer une variable appelée isSSR, qui effectuera la même vérification pour voir si la fenêtre n'est pas égale à la chaîne non définie.

Et nous utiliserons un ternaire pour définir la largeur et la hauteur en vérifiant d'abord si nous sommes sur le serveur. Si c’est le cas, nous utiliserons la valeur par défaut, et sinon, nous utiliserons window.innerWidth et window.innerHeight.

// utils/useWindowSize.js

importer React depuis "react" ;

exporter la fonction par défaut useWindowSize() {
// if (typeof window !== "undefined") {
// return { largeur : 1200, hauteur : 800 };
// }
const isSSR = typeof window !== "undefined";
const [windowSize, setWindowSize] = React.useState({
largeur : estSSR ? 1200 : window.innerWidth,
hauteur : estSSR ? 800 : window.innerHeight,
});

React.useEffect(() => {
window.addEventListener("resize", () => {
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
});
}, []);
>

Ensuite, enfin, nous devons penser au moment où nos composants seront démontés. Que devons-nous faire ? Nous devons supprimer notre écouteur de redimensionnement.

Comment supprimer l'écouteur d'événement de redimensionnement
Vous pouvez le faire en renvoyant une fonction de useEffectand. Nous supprimerons l'écouteur avec window.removeEventListener.

// utils/useWindowSize.js

importer React depuis "react" ;

exporter la fonction par défaut useWindowSize() {
// if (typeof window !== "undefined") {
// return { largeur : 1200, hauteur : 800 };
// }
const isSSR = typeof window !== "undefined";
const [windowSize, setWindowSize] = React.useState({
largeur : estSSR ? 1200 : window.innerWidth,
hauteur : estSSR ? 800 : window.innerHeight,
});

React.useEffect(() => {
window.addEventListener("resize", () => {
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
});

return () => {
  window.removeEventListener("resize", () => {
    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
  });
};

}, []);
>

Mais nous avons besoin d'une référence à la même fonction, pas à deux fonctions différentes comme nous l'avons ici. Pour ce faire, nous allons créer une fonction de rappel partagée pour les deux écouteurs appelée changeWindowSize.

Et enfin, à la fin du hook, nous renverrons notre état windowSize. Et c'est tout.

// utils/useWindowSize.js

importer React depuis "react" ;

exporter la fonction par défaut useWindowSize() {
const isSSR = typeof window !== "undefined";
const [windowSize, setWindowSize] = React.useState({
largeur : estSSR ? 1200 : window.innerWidth,
hauteur : estSSR ? 800 : window.innerHeight,
});

fonction changeWindowSize() {
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
>

React.useEffect(() => {
window.addEventListener("resize", changeWindowSize);

return () => {
  window.removeEventListener("resize", changeWindowSize);
};

}, []);

retour windowSize;
>

Résultat final
Pour utiliser le hook, il suffit de l'importer là où nous en avons besoin, de l'appeler et d'utiliser la largeur partout où nous voulons masquer ou afficher certains éléments.

Dans mon cas, c'est à la barre des 500 px. Là, je souhaite masquer tous les autres liens et afficher uniquement le bouton S'inscrire maintenant, comme vous le voyez dans l'exemple ci-dessus :

//composants/StickyHeader.js

importer React depuis "react" ;
importer useWindowSize depuis "../utils/useWindowSize";

fonction StickyHeader() {
const { width } = useWindowSize();

retour (

{/* visible uniquement lorsque la fenêtre est supérieure à 500 px /}
{largeur > 500 && (
<>

Témoignages


Prix



Une question ?



)>
{/ visible quelle que soit la taille de la fenêtre */}


Inscrivez-vous maintenant



);
}

Ce hook fonctionnera sur n'importe quelle application React rendue par le serveur, telle que Gatsby et Next.js.

1. useDeviceDetect Hook Je suis en train de créer une nouvelle page de destination pour un de mes cours et j'ai rencontré une erreur très étrange sur les appareils mobiles. Sur les ordinateurs de bureau, les styles étaient superbes.

Mais quand j'ai regardé sur mobile, tout n'était pas à sa place et cassé.

Erreur de l'application React
J'ai retracé le problème jusqu'à une bibliothèque appelée React-Device-Detect que j'utilisais pour détecter si les utilisateurs possédaient ou non un appareil mobile. Si c'est le cas, je supprimerais l'en-tête.

//templates/course.js
importer React depuis "react";
importer { isMobile } depuis "react-device-detect" ;

fonction Cours() {
retour (
<>

{!isMobile && }
{/* plus de composants... */}

);
>

Le problème était que cette bibliothèque ne prend pas en charge le rendu côté serveur, ce que Gatsby utilise par défaut. J'avais donc besoin de créer ma propre solution pour vérifier quand un utilisateur était sur un appareil mobile. Et pour cela, j'ai décidé de créer un hook personnalisé avec le nom useDeviceDetect.

Comment j'ai créé le Hook
J'ai créé un fichier séparé pour ce hook dans mon dossier utils avec le même nom, useDeviceDetect.js. Étant donné que les hooks ne sont que des fonctions JavaScript partageables, qui exploitent les hooks React, j'ai créé une fonction appelée useDeviceDetect et importé React.

// utils/useDeviceDetect.js
importer React depuis "react";

exporter la fonction par défaut useDeviceDetect() {}

Comment obtenir l'agent utilisateur depuis la fenêtre
La façon dont nous pouvons nous assurer que nous pouvons obtenir des informations sur l'appareil de l'utilisateur consiste à utiliser la propriété userAgent (située sur la propriété navigator de la fenêtre).

Et puisque l'interaction avec l'API de la fenêtre en tant qu'API/ressource externe serait considérée comme un effet secondaire, nous devons avoir accès à l'agent utilisateur dans le hook useEffect.

// utils/useDeviceDetect.js
importer React depuis "react";

exporter la fonction par défaut useDeviceDetect() {
React.useEffect(() => {
console.log (l'appareil de l'utilisateur est : ${window.navigator.userAgent});
// peut également être écrit sous la forme 'navigator.userAgent'
}, []);
>

Une fois le composant monté, nous pouvons utiliser le type de navigateur pour déterminer si nous sommes sur le client ou le serveur. Si nous sommes sur le serveur, nous n’aurons pas accès à la fenêtre. typeof navigator sera égal à la chaîne undefined puisqu’elle n’est pas là. Sinon, si nous sommes sur le client, nous pourrons récupérer notre propriété d'agent utilisateur.

On peut exprimer tout cela en utilisant un ternaire pour obtenir les données userAgent :

// utils/useDeviceDetect.js
importer React depuis "react";

exporter la fonction par défaut useDeviceDetect() {
React.useEffect(() => {
const userAgent =
type de navigateur === "indéfini" ? "" : navigateur.userAgent;
}, []);
>

Comment vérifier si userAgent est un appareil mobile
userAgent est une valeur de chaîne qui sera définie sur l'un des noms d'appareil suivants s'ils utilisent un appareil mobile :

Android, BlackBerry, iPhone, iPad, iPod, Opera Mini, IEMobile ou WPDesktop.

Tout ce que nous avons à faire est de prendre la chaîne que nous obtenons et d'utiliser la méthode .match() avec une regex pour voir s'il s'agit de l'une de ces chaînes. Nous le stockerons dans une variable locale appelée mobile.

Nous stockerons le résultat dans state avec le hook useState, auquel nous donnerons une valeur initiale false. Pour cela, nous allons créer une variable d'état correspondante isMobile, et le setter sera setMobile.

// utils/useDeviceDetect.js
importer React depuis "react";

exporter la fonction par défaut useDeviceDetect() {
const [isMobile, setMobile] = React.useState(false);

React.useEffect(() => {
const userAgent =
typeof window.navigator === "indéfini" ? "" : navigateur.userAgent;
const mobile = Booléen(
userAgent.match(
/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
)
);
setMobile(mobile);
}, []);
>

Donc, une fois que nous aurons obtenu la valeur mobile, nous la définirons dans l'état. Puis enfin, nous renverrons un objet du hook afin que nous puissions ajouter plus de valeurs à l'avenir si nous voulons choisir d'ajouter plus de fonctionnalités à ce hook.

Dans l'objet, nous ajouterons isMobile en tant que propriété et valeur :

// utils/useDeviceDetect.js
importer React depuis "react";

exporter la fonction par défaut useDeviceDetect() {
const [isMobile, setMobile] = React.useState(false);

React.useEffect(() => {
const userAgent =
typeof window.navigator === "indéfini" ? "" : navigateur.userAgent;
const mobile = Booléen(
userAgent.match(
/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
)
);
setMobile(mobile);
}, []);

retourner { isMobile };
>

Résultat final
De retour sur la page de destination, nous pouvons exécuter le hook et simplement obtenir cette propriété de l'objet déstructuré et l'utiliser là où nous en avons besoin.

//templates/course.js
importer React depuis "react";
importer useDeviceDetect depuis "../utils/useDeviceDetect";

fonction Cours() {
const { isMobile } = useDeviceDetect();

retour (
<>

{!isMobile && }
{/* plus de composants... */}

);
>

Conclusion
Comme j'ai tenté de l'illustrer à travers chacun de ces exemples, les hooks React personnalisés peuvent nous fournir les outils nécessaires pour résoudre nos propres problèmes lorsque les bibliothèques tierces échouent.

J'espère que ce guide vous a donné une meilleure idée du moment et de la manière de créer vos propres hooks React. N'hésitez pas à utiliser l'un de ces hooks et le code ci-dessus dans vos propres projets et comme source d'inspiration pour vos propres hooks React personnalisés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!