Skip Navigation

useMediaQuery Hook

The useMediaQuery custom hook can be used to set a prop based on screen size.

Usage

import React from 'react';

import { magma, useMediaQuery, Button } from 'react-magma-dom';

export function Example() {
  const isSmallerScreen = useMediaQuery(
    `(max-width:${magma.breakpoints.small}px)`
  );

  return (
    <Button isFullWidth={isSmallerScreen}>Full Width at Small Screens</Button>
  );
}

On this page