Crochets

Jutro présente des crochets que vous pouvez utiliser dans différents cas. Lors de leur utilisation, assurez-vous de suivre les règles officielles pour les crochets React.

Vous pouvez importer ces crochets depuis @jutro/platform, par exemple :

import { useCombinedRefs } from '@jutro/platform';

useAccessibleRef

Active l'accessibilité sur les nœuds DOM. Inclut la gestion du focus natif et la réaction aux événements de clavier « Entrée » et « Espace » de la même manière qu'aux clics de souris.

Paramètres :

• focused : si true, l'élément est actif lors du rendu

Renvoie un React.MutableRefObject<T>, la référence de React qui doit être associée au nœud activé pour A11Y.

useCombinedRefs

Crée une seule référence à partir de plusieurs références. Utilisez-le si vous avez besoin de forwardRef et d'un composant ref pour le même élément

Paramètres :

• refs : une série de références React à combiner.

useControlled

Gère l'état des composants contrôlés et non contrôlés.

Paramètres :

• Si une valeur est transmise (composant contrôlé), elle ne renvoie rien à partir du crochet. La fonction setState, dans ce cas, ne fait rien.
• Si aucune valeur n'est transmise (composant non contrôlé), fonctionne comme useState et conserve l'état interne du composant.

Renvoie le même tuple que useState.

const [value, setValue] = useControlled({
  value: valueProp,
  defaultValue: null,
}); // controlled component

useDebounce

Renvoie une valeur libérée qui reflète la dernière valeur pour la période spécifiée.

Paramètres :

• value la valeur à libérer
• delay le délai d'attente avant la mise à jour de l'état

Renvoie la valeur libérée.

const searchDebounced = useDebounce(search, 300);

useDeepEffect

Un élément useEffect qui compare en profondeur ses dépendances. Les éléments DOM, les fonctions, etc. sont toujours comparés par identité (reportez-vous à isEqual de lodash).

Paramètres :

• effect : la fonction d'effet.
• dependencies : une série de dépendances. Ils sont comparés en profondeur.

useDeepEffect(() => {
  if (!Array.isArray(value) && value) {
    const { latitude, longitude, country } = value;
    // This is triggered when any of the fields of "value" are changed
  }
}, [value]);

useDeepMemo

Un élément useMemo qui compare en profondeur ses dépendances. Les éléments DOM, les fonctions, etc. sont toujours comparés par identité (reportez-vous à isEqual de lodash).

Paramètres :

• factory : une fonction d'usine, exactement comme dans useMemo.
• Dépendances param : une série de dépendances. Ils sont comparés en profondeur.

Renvoie La valeur renvoyée par la fonction d'usine.

useDeepMemoize

Mémorise une valeur pour préserver son identité entre les rendus. Une nouvelle valeur n'est renvoyée que si elle n'est pas égale à la valeur précédente. Les éléments DOM, les fonctions, etc. sont toujours comparés par identité (reportez-vous à isEqual de lodash).

Paramètres :

• value La valeur à mémoriser.

Renvoie La valeur mémorisée.

useId

Renvoie un ID. Utile sur les éléments DOM.

Paramètres :

Il n'existe qu'un seul paramètre, un objet avec les champs suivants :

• prefix : un préfixe à ajouter à l'ID.
• default : renvoie la valeur par défaut telle quelle, sans génération supplémentaire. Le préfixe est prioritaire sur la valeur par défaut.

const id = useId({ default: idProp });

useIsMounted

Vérifie si le composant est installé. Lors de la première phase de rendu (corps de la fonction), il n'est pas installé.

Renvoie un React.RefObject<boolean> qui indique si le composant est installé.

useKeyActive

Suit si une clé est active

Paramètres :

• ref au nœud, qui doit servir de champ d'application pour l'événement
• targetKeys : une série de chaînes indiquant les clés à suivre. Par défaut, il comprend Enter et Space. Pour référence, voir clé et code

const isActiveKeyPressed = useKeyActive(refOne); // track Enter and space
const isActiveKeyPressed = useKeyActive(refTwo, ['Shift']); // track only Shift

useKeyPress

Facilite la gestion des événements du clavier

Paramètres :

• ref au nœud, qui doit servir de champ d'application pour l'événement
• targetKeys : une série de chaînes indiquant les clés à suivre.
• callback : rappel pour gérer les événements keydown/keyup

useKeyPress(ref, ['Space', 'Enter'], handleKey);

usePathname

Renvoie le history.location.pathname actuel.

Nous essayons d'éviter useLocation, car il modifie la clé même si le chemin est le même, ce qui entraîne des rendus indésirables.

Si vous vous souciez uniquement des modifications de chemin, ce crochet se concentre sur elles.

usePrevious

Obtient la valeur précédente d'un objet de propriétés ou d'un objet d'état transmis comme paramètre (voir Comment obtenir les propriétés ou l'état précédents ?)

Paramètres :

• value La valeur actuelle à stocker pour la prochaine utilisation du crochet

Renvoie la valeur précédente pour l'objet de référence transmis en tant que paramètre.