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 '@vortex-kit/vortex';

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);