react-use-media

react-media using hooks.

import {useMedia} from 'react-use-media';

const Demo = () => {
  const isWide = useMedia({
    minWidth: 1000,
  });

  return (
    <div>
      Screen is wide: {isWide ? '😃' : '😢'}
    </div>
  );
};

Or, prepare hook once.

const useMedia = createUseMedia({
  minWidth: 1000,
});

const Demo = () => {
  const isWide = useMedia();

  return (
    <div>
      Screen is wide: {isWide ? '😃' : '😢'}
    </div>
  );
};