Hooks with

React

Exemple 1

Scroll Hook

import { useState, useEffect } from 'react';
import { debounce } from 'lodash';

declare global {
  interface Window {}
}

export default function useScroll() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    window.addEventListener(
      'scroll',
      debounce(() => setProgress(window.scrollY), 0)
    );
  }, []);

  return { progress };
}

On serait tenté de return un window.removeEventListener('scroll', () => {}) à la fin du useEffect mais cela impacte les performances d'une manière négative. Je déconseille donc cette pratique.

useScroll.ts

Utilisation du hook

import useScroll from './hooks/useScroll';

function App() {

  const { progress } = useScroll();
  
  return (
  	<p>{progress}</p>
  )
  
}

export default App;

Exemple 2

ScreenSize Hook

import { useState, useEffect } from 'react';
import { debounce } from 'lodash';

declare global {
  interface Window {}
}

export default function useScreenSize() {
  const mobileBreakPoint = 768;
  const [screenSize, setScreenSize] = useState<number>(0);
  const [breakpoint, setBreakpoint] = useState<string>();

  const checkBreakpoint = () => {
    window.innerWidth < mobileBreakPoint ? setBreakpoint('mobile') : setBreakpoint('desktop');
  }

  useEffect(() => {
    window.addEventListener(
      'resize',
      debounce(() => {
        setScreenSize(window.innerWidth);
          checkBreakpoint();
      }, 250)
    );
    setScreenSize(window.innerWidth);
    checkBreakpoint();
  }, []);

  return { screenSize, breakpoint };
}

useScreenSize.ts

Utilisation du hook

import useScreenSize from './hooks/useScreenSize';

function App() {

  const { screenSize, breakpoint } = useScreenSize();
  
  return (
  	<p>{screenSize}</p>
	<p>{breakpoint}</p>
  )
  
}

export default App;