styled-queries-ts
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    styled-queries-ts

    This module is responsible for injecting media queries into styled Components (components made with styled-components)

    Styled-queries-ts is fully compatibile with TypeScript. It is delivered with its own types definitions.

    Instalation

    npm install styled-queries-ts

    Simple Usage

    Just import the module and use it within styled-component with pre-configured breakpoints.

        import respond from 'styled-queries-ts'
        
        const Text = styled.p`
            font-size: 2.2rem;
            ${respond('m', 'font-size: 3.4rem;')
        `
    

    Advanced usage

        import respond from 'styled-queries-ts'
    
        interface IText{
            color?: string;
            margin?: string;
            align?: string;
        }
    
        export default function Component(){
            return <>
                <Text color='purple' margin='2.2rem auto' align='left'>Text with all props</Text>
                <Text color='yellow'>Text with only color passed. The rest styles fallback to default values.</Text>
            </>
        }
    
        const Text = styled.p<IText>`
    
            font-size: 2.2rem;
            text-align: center;
            
            ${(p)=>respond('l',`
                font-size: 4rem;
                color: ${p.color};
                margin: ${p.margin?p.margin:'0'};
            `)
            ${(p)=>respond({min: 1024}, `
                text-align: ${p.align?p.align:'center'};
            `
        `
    

    How does it work?

    The module exports function which takes two arguments: (breakpoint, content)

    It returns a string with media query block with injected breakpoint and styles (content)

    Breakpoint (with pre-configured values)

    To use pre-configured breakpoints pass simply a string of value:

    Breakpoint Value
    'xs' (max-width: 319px)
    's' (min-width: 539px)
    'm' (min-width: 768px)
    'l' (min-width: 992px)
    'xl' (min-width: 1255px)
    'xxl' (min-width: 1662px)
    'tv' (min-width: 2561px)

    and use it like:

        ${respond('m', 'font-size: 3.4rem;')
    

    or pass props (use backticks for second argument - content)

        ${(p)=>respond('m', `font-size: ${p.fontSize};`)
    

    Breakpoint (custom value)

    Instead of using pre-configured breakpoints define your own as an object

    This object should have a sturcture of two possible key-value pairs:

    {min: number} will emit media query block with (min-width: ${number}px) {max: number} will emit media query block with (max-width: ${number}px)

    For example:

        ${respond({min: 1024}, 'font-size: 2.6rem;')
    

    above will result with (min-width: 1024px)

    or pass props (use backticks for second argument - content):

        ${(p)=>respond({max: 996}, `font-size: ${p.fontSize};`)
    

    above will result with (max-width: 996px)

    Content

    It is simply string (or template string ) with CSS styles

    Invalid values

    If some of the breakpoint will be invalid, for example "skd" or {max: 'small'} the default breakpoint (min-width: 319px) will be injected

    Install

    npm i styled-queries-ts

    DownloadsWeekly Downloads

    3

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    5.29 kB

    Total Files

    4

    Last publish

    Collaborators

    • mantczak