First, thank you so many guys for supporting the first part. In this article, I’ve come up with 15 more react custom hooks that can be helpful for you whether you are building a small or large project.

NOTE: I’ve used some of the custom hooks here, which I explained in the first part. If you haven’t read the first part, you might have problems understanding the code. That’s why I recommend reading the first part first. You can find the article here: first part

Table of contents




1. useMediaQuery

import { useState, useEffect } from "react"
import useEventListener from "../13-useEventListener/useEventListener"

export default function useMediaQuery(mediaQuery) {
  const [isMatch, setIsMatch] = useState(false)
  const [mediaQueryList, setMediaQueryList] = useState(null)

  useEffect(() => {
    const list = window.matchMedia(mediaQuery)
    setMediaQueryList(list)
    setIsMatch(list.matches)
  }, [mediaQuery])

  useEventListener("change", e => 

Source link