Nothing's plumb meaningless

    @lendi-ui/breakpoint
    TypeScript icon, indicating that this package has built-in type declarations

    5.2.4 • Public • Published

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

    Keywords

    none

    Install

    npm i @lendi-ui/breakpoint

    DownloadsWeekly Downloads

    1,467

    Version

    5.2.4

    License

    ISC

    Unpacked Size

    16.6 kB

    Total Files

    8

    Last publish

    Collaborators

    • nooshines
    • fernandogontijo_
    • sadia-afrin
    • sean-elliott-lendi
    • nghiato
    • weikun-lendi
    • samanthaksanders
    • sunny.niu
    • mfarshadmehr
    • jayce_dugan
    • jannes.mingram.lendi
    • shraddham
    • antoine_lendi
    • bchiong
    • lendi-owner
    • mekaela
    • leo_lyu
    • andrealin
    • malkyfaith
    • brianduan
    • yihan_lu_lendi
    • matthew-jordan
    • nodemacross
    • samnevers
    • boris.gordon
    • leo.wei
    • naguibihab
    • bharadwajsampath
    • joshatlendi
    • luissilvalendi
    • jacktator
    • cgreenlendi
    • thomaslendi
    • cnader_lendi
    • dimitrioslendi
    • aminozhenko-lendi
    • sabrehagen
    • ashis.nayak
    • adisathu
    • le-kang-lendi
    • yupeili
    • mahmood-sajjadi