How can I create custom hooks for media queries in React?

How can I create custom hooks for media queries in React?

You can create a custom hook by using the useEffect and useState hooks to listen for window resize events.

Can you show me a code example?

Sure! Here's a simple example:

import { useState, useEffect } from 'react';

const useMediaQuery = (query) => {
  const [matches, setMatches] = useState(window.matchMedia(query).matches);

  useEffect(() => {
    const mediaQueryList = window.matchMedia(query);
    const documentChangeHandler = () => setMatches(mediaQueryList.matches);
    mediaQueryList.addEventListener('change', documentChangeHandler);
    return () => mediaQueryList.removeEventListener('change', documentChangeHandler);
  }, [query]);

  return matches;
};

You can use this hook in your components to check if a media query matches.

How do I use this hook in a component?

You can use it like this:

const MyComponent = () => {
  const isMobile = useMediaQuery('(max-width: 768px)');

  return <div>{isMobile ? 'Mobile View' : 'Desktop View'}</div>;
};

What if I want to support multiple queries?

You can modify the hook to accept an array of queries and return an array of boolean values for each query.