styled-components-breakpoint
Utility functions for creating breakpoints in styled-components
💅.
🕸 Website
👀 Have a look at
styled-components-spacing
andstyled-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 = styledh1` color: #444; font-family: sans-serif; font-size: 12px; `;
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;
If you're using Typescript, you'll also need to define the breakpoints and spacings on the theme.
styled.d.ts
; declare
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 = ;const map = ; const Heading = styledh1` color: #444; font-family: sans-serif; font-size: 12px; `;
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'; const Heading = styledh1` font-size: 12px; `; // 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 ; const Heading = styledh1` `; // font-size will always remain the same size<Heading ="sm">The quick brown fox jumps over the lazy dog</Heading> // font-size will increase/decrease with the window size<Heading =>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:
; const breakpoint = ;
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:
; const map = ;
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; <RainbowButton>I am RGB!</RainbowButton>;