styled-breakpoints v14.1.3
πΌ Preview
Inside components.
const Box = styled.div`
background-color: pink;
${({ theme }) => theme.breakpoints.up('sm')} {
background-color: hotpink;
}
${({ theme }) => theme.breakpoints.up('md')} {
background-color: red;
}
`;
Outside components.
import { useTheme } from 'styled-components'; // or '@emotion/react'
const Layout = () => {
const { breakpoints } = useTheme();
const isMd = useMediaQuery(breakpoints.up('md'));
return <>{isMd && <Box />}</>;
};
Examples
ππ» Mobile First
From smallest to largest
ππ» Desktop First
From largest to smallest
ππ» Hooks API
π Documentation
π§ Core concepts
Breakpoints act as the fundamental elements of responsive design. They enable you to control when your layout can adapt to a specific viewport or device size.
Utilize media queries to structure your CSS based on breakpoints. Media queries are CSS features that allow you to selectively apply styles depending on a defined set of browser and operating system parameters. The most commonly used media query property is min-width.
The objective is mobile-first, responsive design. Styled Breakpoints aims to apply the essential styles required for a layout to function at the smallest breakpoint. Additional styles are then added to adjust the design for larger devices. This approach optimizes your CSS, enhances rendering speed, and delivers an excellent user experience.
Getting Started
π© Installation
npm install styled-breakpoints@latest
# or
yarn add styled-breakpoints@latest
Configuration
π© Available breakpoints
Styled Breakpoints includes six default breakpoints, often referred to as grid tiers, for building responsive designs. These breakpoints can be customized.
const breakpoints = {
xs: '0px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
xxl: '1400px',
};
Each breakpoint has been carefully selected to accommodate containers with widths that are multiples of 12. The breakpoints also represent a subset of common device sizes and viewport dimensions, although they do not specifically target every use case or device. Instead, they provide a robust and consistent foundation for building designs that cater to nearly any device.
π© Default Configuration
theme/config.ts
import { createStyledBreakpointsTheme } from 'styled-breakpoints';
export const theme = createStyledBreakpointsTheme();
Customization
π© Breakpoints
theme/config.ts
import { createStyledBreakpointsTheme } from 'styled-breakpoints';
export const theme = createStyledBreakpointsTheme({
breakpoints: {
small: '100px',
medium: '200px',
large: '300px',
xLarge: '400px',
xxLarge: '500px',
},
});
π¨ Merge with Another Theme
theme/config.ts
import { createStyledBreakpointsTheme } from 'styled-breakpoints';
export const primaryTheme = {
fonts: ['sans-serif', 'Roboto'],
fontSizes: {
small: '1em',
medium: '2em',
large: '3em',
},
} as const;
export const theme = {
...primaryTheme,
...createStyledBreakpointsTheme(),
};
π© Installation
npm install styled-components
# or
yarn add styled-components
theme/styled.d.ts
import 'styled-components';
import { theme } from './theme/config';
type MyTheme = typeof theme;
declare module 'styled-components' {
export interface DefaultTheme extends MyTheme {}
}
π© Installation
npm install @emotion/{styled,react}
# or
yarn add @emotion/{styled,react}
theme/emotion.d.ts
import '@emotion/react';
import { theme } from './theme/config';
type MyTheme = typeof theme;
declare module '@emotion/react' {
export interface Theme extends MyTheme {}
}
π Integration to App
app.tsx
import styled { ThemeProvider } from 'styled-components'; // or '@emotion/react'
import { theme } from './theme/config';
const Box = styled.div`
display: none;
${({ theme }) => theme.breakpoints.up('sm')} {
display: block;
}
`;
const App = () => (
<ThemeProvider theme={theme}>
<Box>π₯³</Box>
</ThemeProvider>
);
Media queries API
π Caching is implemented in all functions to optimize performance.
Min-width - up
declare function up(
min: T,
orientation?: 'portrait' | 'landscape'
) => string
const Box = styled.div`
display: none;
${({ theme }) => theme.breakpoints.up('sm')} {
display: block;
}
`;
@media (min-width: 768px) {
display: block;
}
Max-width - down
We occasionally use media queries that go in the other direction (the given screen size or smaller):
declare function down(
max: string,
orientation?: 'portrait' | 'landscape'
) => string
const Box = styled.div`
display: block;
${({ theme }) => theme.breakpoints.down('md')} {
display: none;
}
`;
@media (max-width: 767.98px) {
display: none;
}
Why subtract .02px? Browsers donβt currently support range context queries, so we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.
Single breakpoint - only
There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
declare function only(
name: string,
orientation?: 'portrait' | 'landscape'
) => string
const Box = styled.div`
background-color: pink;
${({ theme }) => theme.breakpoints.only('md')} {
background-color: rebeccapurple;
}
`;
@media (min-width: 768px) and (max-width: 991.98px) {
background-color: rebeccapurple;
}
Breakpoints range - between
Similarly, media queries may span multiple breakpoint widths.
declare function between(
min: string,
max: string,
orientation?: 'portrait' | 'landscape'
) => string
const Box = styled.div`
background-color: gold;
${({ theme }) => theme.breakpoints.between('md', 'xl')} {
background-color: rebeccapurple;
}
`;
@media (min-width: 768px) and (max-width: 1199.98px) {
background-color: rebeccapurple;
}
useMediaQuery
hook
features:
- π§ optimal performance by dynamically monitoring document changes in media queries.
- πͺπ» It supports SSR (server-side rendering).
- π¦ Minified and gzipped size 284b.
declare function useMediaQuery(query: string) => boolean
import { useTheme } from 'styled-components'; // or from '@emotion/react'
import { useMediaQuery } from 'styled-breakpoints/use-media-query';
import { Box } from 'third-party-library';
const SomeComponent = () => {
const { breakpoints } = useTheme();
const isMd = useMediaQuery(breakpoints.only('md'));
return <AnotherComponent>{isMd && <Box />}</AnotherComponent>;
};
License
MIT License
Copyright (c) 2018-2019 Maxim Alyoshin.
This project is licensed under the MIT License - see the LICENSE file for details.
Contributors
15 days ago
1 month ago
1 month ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
6 months ago
6 months ago
6 months ago
6 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
9 months ago
9 months ago
9 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago