Hooks.mdx

import { Meta } from '@storybook/addon-docs';

import { Header } from '../shared'; import { Alert } from '../../components'; import EvaluationForm from '../../stories/shared/EvaluationForm';

• Importing
• Usage

Importing

import useMaxWidthMediaQuery from '@catho/quantum/shared/hooks';

Important:

Due to jest{' '} not supporting windows.matchMedia yet , we recommend that you use the below mock in your tests. Just add this function to the jest-config file or inside, on top of everything else, in the component's test file.

import matchMediaMock from '@catho/quantum/shared/helpers'

describe('My tests', () => {
  beforeAll(() => {
    matchMediaMock()
  });
});

Usage

This hook uses css media query(max-width) to check browser resize. Instead of firing with every pixel change, like useWindowSize, it will fire only when browser goes through the defined media query; It will return a boolean.

import useMaxWidthMediaQuery from '@catho/quantum/shared/hooks';

import { theme } from '@catho/quantum/shared';

const {
  breakpoints: { medium },
} = theme;
const Component = () => {
  const isBreakpoint = useMaxWidthMediaQuery(medium.width)
  return (
    <div>
      {isBreakpoint ? <Componente1 /> : <Componente2 />}
    </div>
  )
}

export default Component;