styled-components-breakpoint
TypeScript icon, indicating that this package has built-in type declarations

3.0.0-preview.20 • Public • Published

styled-components-breakpoint

npm npm bundle size (minified + gzip) npm ![Build Status]GithubActions

Utility functions for creating breakpoints in styled-components 💅.

🕸 Website

📘 Change log

👀 Have a look at styled-components-spacing and styled-components-grid which both work well with this package.

Installation

NPM:

npm install styled-components-breakpoint

Yarn:

yarn add styled-components-breakpoint

Usage

Using the themable mixins

import styled from 'styled-components';
import breakpoint, {map} from 'styled-components-breakpoint';
 
const Heading = styled.h1`
  color: #444;
  font-family: sans-serif;
  font-size: 12px;
 
  ${breakpoint('md')`
    font-size: 16px;
  `}
 
  ${breakpoint('xl')`
    font-size: 24px;
  `}
 
  ${map({mobile: 'red', desktop: 'green'}, color => `color: ${color};`)}
 
`;

Using custom breakpoints for the themable mixins

The themable breakpoints can be customised using ThemeProvider. For example, to use the same breakpoints as Bootstrap, you can do so like this:

import React from 'react';
import ReactDOM from 'react-dom';
import {ThemeProvider} from 'styled-components';
 
const theme = {
  breakpoints: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200,
  },
};
 
ReactDOM.render(
  <ThemeProvider theme={theme}>{/* ... */}</ThemeProvider>,
  document.getElementById('app'),
);

If you're using Typescript, you'll also need to define the breakpoints and spacings on the theme.

styled.d.ts

import {DefaultTheme} from 'styled-components';
 
declare module 'styled-components' {
  export interface DefaultTheme {
    breakpoints: {
      [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;
    };
  }
}

Using the mixin factories

If your breakpoints and spacings don't need to be themable then you can use the static mixin factories.

breakpoints.js: Configure the breakpoints

import styled from 'styled-components';
import {createBreakpoint, createMap} from 'styled-components-breakpoint';
 
const breakpoints = {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
};
 
const breakpoint = createBreakpoint(breakpoints);
const map = createMap(breakpoints);
 
const Heading = styled.h1`
  color: #444;
  font-family: sans-serif;
  font-size: 12px;
 
  ${breakpoint('md')`
    font-size: 16px;
  `}
 
  ${breakpoint('xl')`
    font-size: 24px;
  `}
 
  ${map({md: 'red', xl: 'green'}, color => `color: ${color};`)}
 
`;

API

breakpoint(a, b)

Generate a media query using using the set of breakpoints defined in the theme.

Parameters:

  • a - Required - The breakpoint name at which the style applies.
  • b - Optional - The breakpoint name at which the style stops applying.

Example:

import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';
 
export const Heading = styled.h1`
  font-size: 12px;
  ${breakpoint('tablet')`
    font-size: 16px;
  `}
  ${breakpoint('desktop')`
    font-size: 24px;
  `}
`;
 
// font-size will increase/decrease with the window size
<Heading>The quick brown fox jumps over the lazy dog</Heading>;

map(valueOrValues, mapValueToStyle)

Map a set of values to a set of media queries using the set of breakpoints defined in the theme.

Parameters:

  • valueOrValues - Required - The value or a map of values to style at each breakpoint.
  • mapValueToStyle - Required - The function used to map a value to style.

Example:

import styled from 'styled-components';
import {map} from 'styled-components-breakpoint';
 
const sizes = {
  sm: '12px',
  md: '16px',
  lg: '20px',
}
 
const fontSize = ({size}) => map(size, s => `font-size: ${sizes[s]};`);
 
export const Heading = styled.h1`
  ${fontSize}
`;
 
// font-size will always remain the same size
<Heading size="sm">The quick brown fox jumps over the lazy dog</Heading>
 
// font-size will increase/decrease with the window size
<Heading size={{mobile: 'sm', tablet: 'lg'}}>The quick brown fox jumps over the lazy dog</Heading>

createBreakpoint(breakpoints)

Create a breakpoint(a, b) function to generate a media query using a set of pre-defined breakpoints.

Parameters:

  • breakpoints - Required - A set of breakpoints.

Example:

import {createBreakpoint} from 'styled-components-breakpoint';
 
export const breakpoint = createBreakpoint({
  xs: 0,
  sm: 300,
  md: 600,
  lg: 900,
  xl: 1200,
});

createMap(breakpoints)

Create a map(valueOrValues, mapValueToStyle) function to map a set of values to a set of media queries using a set of pre-defined breakpoints.

Parameters:

  • breakpoints - Required - A set of breakpoints.

Example:

import {createMap} from 'styled-components-breakpoint';
 
export const map = createMap({
  xs: 0,
  sm: 300,
  md: 600,
  lg: 900,
  xl: 1200,
});

Default breakpoints

If you don't provide any breakpoints, the default breakpoints used by the breakpoint() and map() functions are:

Breakpoint Size Description
mobile 0px (0em) Targeting all devices
tablet 737px (46.0625em) Targeting devices that are LARGER than the iPhone 6 Plus (which is 736px in landscape mode)
desktop 1195px (74.6875em) Targeting devices that are LARGER than the 11" iPad Pro (which is 1194px in landscape mode)

FAQ

Q. How do I use CSS objects?

import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';
 
const RainbowButton = styled.button(
  {
    color: 'white',
    backgroundColor: 'red',
  },
  breakpoint('tablet')({
    backgroundColor: 'blue',
  }),
  breakpoint('desktop')({
    backgroundColor: 'green',
  }),
);
 
<RainbowButton>I am RGB!</RainbowButton>;

Package Sidebar

Install

npm i styled-components-breakpoint

Weekly Downloads

15,801

Version

3.0.0-preview.20

License

MIT

Unpacked Size

41 kB

Total Files

21

Last publish

Collaborators

  • jameslnewell