useMedia

export const Component: Story = () => {
  const value = useMedia(
    ['(min-width: 1000px)', '(min-width: 900px)', '(min-width: 800px)'],
    [12345678, 1234567, 123456],
    12345,
  );
 
  return (
    <>
      <p>Try resizing the story window to print a different number.</p>
      <p>Value: {value}</p>
    </>
  );
};

type MediaValue = { mq: string };
 
export const Component: Story = () => {
  const { mq } = useMedia(
    ['(min-width: 1000px)', '(min-width: 900px)', '(min-width: 800px)'],
    [{ mq: 'extra' }, { mq: 'large' }, { mq: 'medium' }],
    { mq: 'small' },
  );
 
  return (
    <>
      <p>Try resizing the story window to print a different value from an object.</p>
      <p>Value: {mq}</p>
    </>
  );
};