@ki2/react-hooks

Hooks React génériques

useInstance

Permet de créer une instance de class proprement.

Usage:

const store = useInstance(() => new MaClass());

useInterval(callback, delay)

Permet de lancer une fonction de callback (définie dans un composant) de ramière régulière (toutes les delay millisecondes).

function doSomething() {
  // do something here every second
}

useInterval(doSomething, 1000);

La fonction de callback peut aussi prendre en argument une fonction stop qui permet d'arrêter les appels.

function doSomething(stop){
  // do something here every second
  if (/* some condition */){
    stop(); // stop interval
  }
}

useInterval(doSomething, 1000)

useScrollPosition

Paramètres:

• effect : fonction à appeler à chaque fois que la position de scroll change (ou qu'une dépendance deps est modifiée)
• deps : dépendances externes de la fonction d'effet. [optionel]
• element: element dans lequel on analyse la position de scroll [optionel]
• useWindow (boolean) : force l'utilisation de la fenêtre entière plutôt que de element [optionel]
• wait [number] : nombre de millisecondes à attendre avant d'appeler la fonction d'effet

La fonction d'effet prend 2 paramètres : la position de scroll courrante currPos et la position de scroll précédante (du dernier appel) prevPos.

Une position (currPos ou prevPos) est un objet contenant x et y (respectivement les positions de scroll selon x et y).

Exemple d'utilisation :

const [hide, setHide] = useState(true);

useScrollPosition(
  (curr, prev) => {
    const isHide = curr.y < 250;
    if (isHide !== hide) {
      setHide(isHide);
    }
  },
  [hide],
  contentRef // Reference to the content we looking for
);