useMedia

useMedia is a custom hook to handle media queries. It utilizes json2mq to parse a string or object into json.

The useMedia hook returns an object with the following fields:

Copy
import { useMedia } from 'minerva-ui';

Usage#

function Example() {
  const small = useMedia('(max-width: 640px)');
  const medium = useMedia({ maxWidth: 768 });

  return (
    <>
      <Box bg="green.300" height={100} width={small ? 100 : 500} />
      <Box bg="orange.300" height={100} width={medium ? 500 : 100} />
    </>
  );
}
function Example() {
  const small = useMedia('(max-width: 640px)');
  const medium = useMedia({ maxWidth: 768 });
  return (
    <>
      <Box bg="green.300" height={100} width={small ? 100 : 500} />
      <Box bg="orange.300" height={100} width={medium ? 500 : 100} />
    </>
  );
}