Hook API: useBreakpoint

I propose a hooks API:

import { up, useBreakpoint } from 'styled-breakpoints`

const isMobile = useBreakpoint(up('tablet'));

Working Implementation:

import { useState, useEffect } from 'react';
import { useTheme } from 'styled-components';

export const useBreakpoint = (breakpoint: (z: { theme: any }) => string) => {
  const theme = useTheme();
  const query = breakpoint({ theme }).replace(/^@media/, '');

  const mq = window.matchMedia(query);
  const [isBreak, setIsBreak] = useState(mq.matches);

  useEffect(() => {
    function handleResize() {
      setIsBreak(window.matchMedia(query).matches);
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return isBreak;
};

export default useBreakpoint;

[rmariuzzo]

Maybe something like:

const desktop = useBreakpoint(_ => _.theme.media.desktop)

return desktop ? <Table /> : <List />

The benefit would be to be able to not render both and keep one hidden. This would require some sort of window resize handler to trigger updates.

[samholmes]

I created the hook to use the same breakpoints defined in my theme in my component’s logic, specifically to enable and disable certain animations using react-spring that are only relevant on mobile layouts. There’s a lot of one could do with this hook and I imagine a lot of problems can be solved with this hook.