Custom hooks in React

README.md

Custom hooks from the talk: https://youtu.be/J-g9ZJha8FE

useClickOutside.jsx

import React from "react";

function useClickOutside(elRef, callback) {
  const callbackRef = React.useRef()
  callbackRef.current = callback
  
  React.useEffect(() => {
    const handleClickOutside = e => {
      if (elRef?.current?.contains(e.targer) && callbackRef) {
            callbackRef.current(e)
          }
    }
    
    document.addEventListener('click', handleClickOutside, true)
    
    return () => {
      document.removeEventListenever('click', handleClickOutside, true)
    }
  }, [callbackRef, elRef])
}

useDarkMode.js

import React from "react";

const matchDark = `(prefers-color-scheme: dark)`;

function useDarkMode() {
  const [isDark, setIsDark] = React.useState(
    () => window.matchMedia && window.matchMedia(matchDark).matches
  );

  React.useEffect(() => {
    const matcher = window.matchMedia(matchDark);
    const onChange = ({ matches }) => setIsDark(matches);
    matcher.addListener(onchange);
    return () => {
      matcher.removeListener(onChange);
    };
  }, [setIsDark]);

  return isDark;
}