@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}`)};
`;