Package Exports

styled-components-breakpoint

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (styled-components-breakpoint) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

styled-components-breakpoint

Utility functions for creating breakpoints in styled-components 💅.

Change log

Installation

yarn add styled-components styled-components-breakpoint

Usage

Examples

Using the default breakpoints

./Heading.jsx

import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';

const Heading = styled.h1`

  color: #444;
  font-family: sans-serif;
  
  font-size: 12px;
  
  ${breakpoint('tablet')`
    font-size: 16px;
  `}
  
  ${breakpoint('desktop')`
    font-size: 24px;
  `}
  
`;

export default Heading;

./index.jsx

import React from 'react';
import Heading from './Heading';

<Heading>Hello World!</Heading>

Using custom breakpoints

Breakpoints may be customised using ThemeProvider. To use the same breakpoints as Bootstrap, you can do so like this:

./Heading.jsx

import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';

const Heading = styled.h1`

  color: #444;
  font-family: sans-serif;
  
  ${breakpoint('sm')`
    font-size: 12px;
  `}
  
  ${breakpoint('md')`
    font-size: 16px;
  `}
  
  ${breakpoint('lg')`
    font-size: 24px;
  `}
  
`;

export default Heading;

./index.jsx

import React from 'react';
import {ThemeProvider} from 'styled-components';

const theme = {
  breakpoints: { 
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200
  }
};

<ThemeProvider theme={theme}>
  <Heading>Hello World!</Heading>
</ThemeProvider>

API

`breakpoint(gte)`

`breakpoint(gte, lt)`

Wraps styles in a @media block.

Properties:

gte - Required. A string. The name of the breakpoint from which the styles will apply.
lt - Optional. A string. The name of the breakpoint from which the styles will no longer apply.

Returns:

The @media block.

Example:

import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';

const Thing = styled.div`

  font-size: 12px;

  ${breakpoint('tablet')`
    font-size: 16px;
  `};

  ${breakpoint('desktop')`
    font-size: 24px;
  `};
  
`;

<Thing/>

Output:

.cESAFm {
  font-size: 12px;
}

@media (min-width: 46.0625em) {
  .cESAFm {
    font-size: 16px;
  }
}

@media (min-width: 64.0625em) {
  .cESAFm {
    font-size: 24px;
  }
}

`map(value, mapValueToCSS)`

Maps values to styles in @media blocks.

Properties:

value - Required. {[string]: T} or T. A map of values to breakpoint names.
mapValueToCSS - Required. T => string. A function to map a value to styles at the specified breakpoint.

Returns:

The @media blocks.

Example:

import styled from 'styled-components';
import {map} from 'styled-components-breakpoint';

const Thing = styled.div`
  ${({size}) => map(size, val => `width: ${Math.round(val * 100)}%;`)}
`;

<Thing size={{mobile: 1, tablet: 1/2, desktop: 1/4}}/>

Output:

.cESAFm {
  width: 100%;
}

@media (min-width: 46.0625em) {
  .cESAFm {
    width: 50%;
  }
}

@media (min-width: 64.0625em) {
  .cESAFm {
    width: 25%;
  }
}

`createStatic()`

`createStatic(breakpoints)`

Creates a static set of breakpoints which aren't themable.

Properties:

breakpoints - Optional. {[string]: number}. A map of breakpoint names and sizes.

Returns:

an object containing the breakpoints, the breakpoint and map functions

Example:

import styled from 'styled-components';
import {createStatic} from 'styled-components-breakpoint';

const breakpoints = createStatic();

const Thing = styled.div`

  font-size: 12px;

  ${breakpoints.tablet`
    font-size: 16px;
  `};

  ${breakpoints.desktop`
    font-size: 24px;
  `};
  
`;

<Thing/>

Output:

.cESAFm {
  font-size: 12px;
}

@media (min-width: 46.0625em) {
  .cESAFm {
    font-size: 16px;
  }
}

@media (min-width: 64.0625em) {
  .cESAFm {
    font-size: 24px;
  }
}

Default breakpoints

The default breakpoints are:

{
    mobile: 0,      // targeting all devices
    tablet: 737,    // targeting devices that are larger than the iPhone 6 Plus (which is 736px in landscape mode)
    desktop: 1025   // targeting devices that are larger than the iPad (which is 1024px in landscape mode)
}