styled-media-queries

Shorthand for media queries within styled-components.

Find on NPM

Versions

As of version 1.0.0, this package is suitable for styled-components v6. For v5, use version 0.2.0.

Usage Examples

import { breakpointUp } from '@doubleedesign/styled-media-queries';

Standalone, passing a number:

export const SampleElement = styled.div`
    width: 30%;
    flex-basis: 30%;
    
    ${breakpointUp(768, css`
        width: 15%;
        flex-basis: 15%;
    `)};
`;

Components within a ThemeProvider:

export const SampleElement = styled.div`
    width: 30%;
    flex-basis: 30%;
    
    ${props => breakpointUp(props.theme.breakpoints.md, css`
        width: 15%;
        flex-basis: 15%;
    `)};
`;

export const SampleElement = styled.div`
    width: 30%;
    flex-basis: 30%;
    
    ${({ theme }) => breakpointUp(theme.breakpoints.md, css`
        width: 15%;
        flex-basis: 15%;
    `)};
`;

export const SampleElement = styled.div`
    width: 30%;
    flex-basis: 30%;
    
    ${({ theme }) => {
        return breakpointUp(theme.breakpoints.md, css`
            width: 15%;
            flex-basis: 15%;
        `);
    }};
`;

Note: css is optional for basic CSS - you can just pass a template literal on its own; but including css is helpful for enabling syntax highlighting. That said, if you have functions inside, you do need to use css:

export const SampleElement = styled.div`
    background: ${({ theme }): string => theme.colors.light};
    
    ${props => breakpointUp(props.theme.breakpoints.md, css`
        background: ${props.theme.colors.dark};
    `)};
`;

For a full list of available functions and more details, please see this doc.