useMedia

The

useMedia

hook is a React hook that tracks the state of a CSS media query, indicating whether the screen size matches the query.

Code Editor

Features

Tracks the state of a CSS media query

Optimizes media query performance for smoother user interactions.

Simplifies media query handling, enhancing code readability.

Anatomy

Import all parts and combine them together.

import { useMedia } from '@umrel/umrel';

const Demo = () => {
 const isMobile = useMedia({ maxWidth: '760px' }, false);

  return (
    <>
     {isMobile ?
       <Text variant="body-md-mobile">Mobile</Text> :
       <Text variant="heading-xs-desktop">Desktop</Text>
      }
    </>
  );
};

Parameters

The

useMedia

hook accepts a single parameter, a string representing a CSS media query.

const isMobile = useMedia({ minWidth: '375px', maxWidth: '768px' }, false);

const reduceMotion = useMedia('(prefers-reduced-motion: reduce)', false);