Hooks

useMedia

Defines a variable with a value based on the screen size.

It takes in three arguments:

• queries: an array of media query strings, such as (max-width: 600px).
• values: an array of values that correspond to the media queries.
• defaultValue: a default value that is returned if none of the media queries match.

const color = useMedia(['(max-width: 700px)', '(max-width: 1200px)'], ['red', 'green'], 'blue');

used with a component:

const color = useMedia(['(max-width: 700px)', '(max-width: 1200px)'], ['red', 'green'], 'blue');

<Box color={color} />;