@lendi-ui/breakpoint

Breakpoint CSS style with between, gte and map.

Installation

yarn add @lendi-ui/breakpoint

Testing

When testing with getBreakpoint or useBreakpoint it is advised to mock @lendi-ui/breakpoint as window.matchMedia is not available on the JSDOM. If you need to test resize functionality, you can instead add something like the following code to your tests to mock the window.matchMedia function:

import { match } from 'css-mediaquery';

const width: number = 1201;

window.matchMedia = jest.fn().mockImplementation((query: string) => ({
  matches: match(query, { type: 'screen', width: `${width}px` }),
}));

Usage

• between receives two parameters. The first one is the smaller breakpoint and the second one is the larger breakpoint. The CSS style will be between these two breakpoints.

import { between } from '@lendi-ui/breakpoint';
const Component = styled.div`
  ${between('xs', 'md')`
    color: red;
  `} ${between('lg', 'xl')`
    color: green;
  `}
  color: pink;
`;

• gte receives one parameter that CSS style will be larger than this breakpoint.

import { gte } from '@lendi-ui/breakpoint';
const Mobile = styled.code`
  ${gte('sm')`
    background-color: ${getColour('fill', 'accent')};
  `};
`;

• map will match different breakpoint style for this property.

import { map } from '@lendi-ui/breakpoint';
const TextWithDifferentColoursForEachBreakpoint = styled(Text)`
  ${map({ xs: 'red', sm: 'green', md: 'pink', lg: '#ffee12' }, (value: Colors) => `color: ${value}`)};
`;