Basic usage

To use breakpoints in your application, you need to wrap it in a <Breakpoints /> component. And then you can get the value of the media query in any part of your application through the context.

TIP

Resize the window to see the changes.

import { defaultBreakpoints as Breakpoints } from '@semcore/ui/base-components';
import Button from '@semcore/ui/button';
import React from 'react';

const buttonSizes = ['m', 'l'] as const;

const Example = () => {
  const index = React.useContext(Breakpoints.Context);
  const size = index !== undefined ? buttonSizes[index] : 'm';

  return (
    <Button size={size}>
      Size
      {' '}
      {size.toUpperCase()}
    </Button>
  );
};

const Demo = () => {
  return (
    <Breakpoints>
      <Example />
    </Breakpoints>
  );
};

export default Demo;

Manual control

You can use an instance of the MediaList class, it has methods matches/addListener/removeListener and destructor.

import { defaultBreakpoints as Breakpoints } from '@semcore/ui/base-components';
import Button from '@semcore/ui/button';
import React from 'react';

const Demo = () => {
  const [index, setIndex] = React.useState(Breakpoints.mediaList.matches());

  React.useEffect(() => {
    const unsubscribe = Breakpoints.mediaList.addListener((index: number) => {
      setIndex(index);
    });
    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <Button size={(['m', 'l'] as const)[index]}>
      Size
      {['M', 'L'][index]}
    </Button>
  );
};

export default Demo;

Custom media

If you want to create a custom breakpoint component you need to call the createBreakpoints() function and pass an array of media queries.

TIP

The 'Breakpoints.mediaList.matches()' will return the intex of the first matching media query. From left to right.

import { createBreakpoints } from '@semcore/ui/base-components';
import React from 'react';

const MEDIA = [
  '(max-width: 300px)',
  '(max-width: 500px)',
  '(max-width: 700px)',
  '(max-width: 900px)',
  '(max-width: 1100px)',
];
const Breakpoints = createBreakpoints(MEDIA);

const Example = () => {
  const index = React.useContext(Breakpoints.Context);

  return (
    <div>
      Media matches "
      {(index !== undefined && MEDIA[index]) || 'ZOOM WINDOW'}
      "
    </div>
  );
};

const Demo = () => {
  return (
    <Breakpoints>
      <Example />
    </Breakpoints>
  );
};

export default Demo;

Mocking

You can mock global media queries for testing purposes.

WARNING

It will work if you use createBreakpoints function only.

import { createBreakpoints } from '@semcore/ui/base-components';
import React from 'react';

const meadiaQueries = [
  '(max-width: 300px)',
  '(max-width: 500px)',
  '(max-width: 700px)',
  '(max-width: 900px)',
  '(max-width: 1100px)',
];

const mockedScreenQuery = '(max-width: 700px)';
const noop: any = () => {};
if (globalThis.window) {
  const realMatchMedia = window.matchMedia;
  window.matchMedia = (query): any => {
    if (meadiaQueries.includes(query)) {
      return {
        matches: query === mockedScreenQuery,
        meadia: query,
        onchange: null,
        addListener: noop,
        removeListener: noop,
        addEventListener: noop,
        removeEventListener: noop,
        dispatchEvent: noop,
      };
    }
    return realMatchMedia(query);
  };
}

const Breakpoints = createBreakpoints(meadiaQueries);

const Example = () => {
  const index = React.useContext(Breakpoints.Context);

  return (
    <div>
      Media matches '
      {(index !== undefined && meadiaQueries[index]) || 'ZOOM WINDOW'}
      '
    </div>
  );
};

const Demo = () => {
  return (
    <Breakpoints>
      <Example />
    </Breakpoints>
  );
};

export default Demo;