styled-components-breakpoint

styled-components-breakpoint

![Build Status]

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 themable breakpoints

App.js: Configure the breakpoints (or just use the defaults)

import React from 'react';
import ReactDOM from 'react-dom';
import {ThemeProvider} from 'styled-components';
import {Heading} from './Heading';

const theme = {
  breakpoints: {
    xs: 0,
    sm: 300,
    md: 600,
    lg: 900,
    xl: 1200,
  },
};

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Heading>Hello World!</Heading>
  </ThemeProvider>,
  document.getElementById('app'),
);

Heading.js: Create a component using the breakpoints

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

export const Heading = styled.h1`
  color: #444;
  font-family: sans-serif;
  font-size: 12px;

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

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

Using static breakpoints

breakpoints.js: Configure the breakpoints

import {createBreakpoint, createMap} from 'styled-components-breakpoint';

export const breakpoints = {
  xs: 0,
  sm: 300,
  md: 600,
  lg: 900,
  xl: 1200,
};

export const breakpoint = createBreakpoint(breakpoints);
export const map = createMap(breakpoints);

Heading.js: Create a component using the breakpoints

import styled from 'styled-components';
import {breakpoint} from './breakpoints';

export const Heading = styled.h1`
  color: #444;
  font-family: sans-serif;
  font-size: 12px;

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

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

API

breakpoint(a, b)

Generate a media query using using the set of breakpoints defined in the styled-components 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 styled-components 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 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)

How to

Using Typescript

Follow the styled-components documentation for setting up a theme. Be sure to include some breakpoints in the type definition!

1. Create the declaration file:

   styled.d.ts

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

2. Create the theme:

   theme.ts

   import {DefaultTheme} from 'styled-components';
   
   export const theme: DefaultTheme = {
     breakpoints: {
       xs: 0,
       sm: 300,
       md: 600,
       lg: 900,
       xl: 1200,
     },
   };
   

3. Use the theme in your application:

   App.js

   import React from 'react';
   import ReactDOM from 'react-dom';
   import {ThemeProvider} from 'styled-components';
   import {theme} from './theme';
   
   ReactDOM.render(
     <ThemeProvider theme={theme}>
       {/* other components go here */}
     </ThemeProvider>,
     document.getElementById('app'),
   );