JA
jameslnewell/styled-components-breakpoint
Utility function for using breakpoints with styled-components 💅.
styled-components-breakpoint
Utility functions for creating breakpoints in styled-components 💅.
Have a look 👀 at
styled-components-spacingandstyled-components-gridwhich both work well with this package.
Installation
yarn add styled-components styled-components-breakpointUsage
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. For example, 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. Astring. The name of the breakpoint from which the styles will apply.lt- Optional. Astring. The name of the breakpoint at 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}orT. 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
objectcontaining the breakpoints, thebreakpointandmapfunctions
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)
}