use-breakpoints custom hook

use-breakpoints.ts

import { useEffect, useState } from 'react';
import { useMediaQuery } from 'react-responsive';

const gridBreakpoints = {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
  xxl: 1400,
};

const { xs, sm, md, lg, xl, xxl } = gridBreakpoints;

const getMaxWidthQuery = (breakpoint: number) => ({
  query: `(max-width: ${breakpoint - 0.02}px)`,
});

const getMinWidthQuery = (breakpoint: number) => ({
  query: `(min-width: ${breakpoint}px)`,
});

const initialState = {
  mediaBreakPointDownXs: false,
  mediaBreakPointUpXs: false,
  mediaBreakPointDownSm: false,
  mediaBreakPointUpSm: false,
  mediaBreakPointDownMd: false,
  mediaBreakPointUpMd: false,
  mediaBreakPointDownLg: false,
  mediaBreakPointUpLg: false,
  mediaBreakPointDownXl: false,
  mediaBreakPointUpXl: false,
  mediaBreakPointDownXxl: false,
  mediaBreakPointUpXxl: false,
};

const useBreakpoints = () => {
  const [breakpoints, setBreakpoints] = useState(initialState);

  const mediaBreakPointDownXs = useMediaQuery(getMaxWidthQuery(xs));
  const mediaBreakPointUpXs = useMediaQuery(getMinWidthQuery(xs));

  const mediaBreakPointDownSm = useMediaQuery(getMaxWidthQuery(sm));
  const mediaBreakPointUpSm = useMediaQuery(getMinWidthQuery(sm));

  const mediaBreakPointDownMd = useMediaQuery(getMaxWidthQuery(md));
  const mediaBreakPointUpMd = useMediaQuery(getMinWidthQuery(md));

  const mediaBreakPointDownLg = useMediaQuery(getMaxWidthQuery(lg));
  const mediaBreakPointUpLg = useMediaQuery(getMinWidthQuery(lg));

  const mediaBreakPointDownXl = useMediaQuery(getMaxWidthQuery(xl));
  const mediaBreakPointUpXl = useMediaQuery(getMinWidthQuery(xl));

  const mediaBreakPointDownXxl = useMediaQuery(getMaxWidthQuery(xxl));
  const mediaBreakPointUpXxl = useMediaQuery(getMinWidthQuery(xxl));

  useEffect(() => {
    setBreakpoints({
      mediaBreakPointDownXs,
      mediaBreakPointUpXs,
      mediaBreakPointDownSm,
      mediaBreakPointUpSm,
      mediaBreakPointDownMd,
      mediaBreakPointUpMd,
      mediaBreakPointDownLg,
      mediaBreakPointUpLg,
      mediaBreakPointDownXl,
      mediaBreakPointUpXl,
      mediaBreakPointDownXxl,
      mediaBreakPointUpXxl,
    });
  }, [
    mediaBreakPointDownXs,
    mediaBreakPointUpXs,
    mediaBreakPointDownSm,
    mediaBreakPointUpSm,
    mediaBreakPointDownMd,
    mediaBreakPointUpMd,
    mediaBreakPointDownLg,
    mediaBreakPointUpLg,
    mediaBreakPointDownXl,
    mediaBreakPointUpXl,
    mediaBreakPointDownXxl,
    mediaBreakPointUpXxl,
  ]);

  return breakpoints;
};

export default useBreakpoints;

use-breakpoints

useMediaQuery based custom hook for spefic breakpoints

Usage

Modify the breakpoint values:

const gridBreakpoints = {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
  xxl: 1400,
};

Use in a component

export function MyComponent() {
  // Destructure only what you need in the current component
  const {
    // mediaBreakPointDownXs,
    // mediaBreakPointUpXs,
    // mediaBreakPointDownSm,
    // mediaBreakPointUpSm,
    mediaBreakPointDownMd,
    mediaBreakPointUpMd,
    // mediaBreakPointDownLg,
    // mediaBreakPointUpLg,
    // mediaBreakPointDownXl,
    // mediaBreakPointUpXl,
    // mediaBreakPointDownXxl,
    // mediaBreakPointUpXxl,
  } = useBreakpoints();
  
  return (
    <div>
     {mediaBreakPointDownMd && <div>Rendered only in less than 768px wide viewport</div>}
     {mediaBreakPointUpMd && <div>Rendered only in more than 768px wide viewport</div>}
    </div>
  )
}