styled-breakpoints

styled-breakpoints

Simple and powerful tool for creating media queries with SSR support.

    OR   

Breakpoints

Breakpoints serve as adjustable widths that determine the behavior of your responsive layout across different device or viewport sizes.

Preview

For own components.

const Box = styled.div`
  background-color: pink;

  ${({ theme }) => theme.breakpoints.up('sm')} {
    background-color: hotpink;
  }

  ${({ theme }) => theme.breakpoints.up('md')} {
    background-color: red;
  }
`;

For third party components.

const Layout = () => {
  const isMd = useMediaQuery(useTheme()?.breakpoints.up('md'));

  return <>{isMd && <Box />}</>;
};

Examples

Mobile First

From smallest to largest

Desktop First

From largest to smallest

hooks API

Documentation

• core concepts
• available breakpoints
• quick start
• migration from v11
• media queries
  • min-width
  • max-width
  • single breakpoint
  • between breakpoints
  • useMediaQuery hook
• customization
  • strict typed breakpoints
  • merge with another theme

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.

Available breakpoints

Styled Breakpoints includes six default breakpoints, often referred to as grid tiers, for building responsive designs. These breakpoints can be customized.

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.

const breakpoints = {
  xs: '0px',
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
  xxl: '1400px',
};

Quick start

💅 Styled Components

Installation

npm install styled-components styled-breakpoints@latest

# or

yarn add styled-components styled-breakpoints@latest

styled.d.ts

import 'styled-components';
import { StyledBreakpointsTheme } from 'styled-breakpoints';

declare module 'styled-components' {
  export interface DefaultTheme extends StyledBreakpointsTheme {}
}

app.tsx

import styled { DefaultTheme, ThemeProvider } from 'styled-components';
import { createStyledBreakpointsTheme } from 'styled-breakpoints';

const Box = styled.div`
  display: none;

  ${({ theme }) => theme.breakpoints.up('sm')} {
    display: block;
  }
`
const theme: DefaultTheme = createStyledBreakpointsTheme();

const App = () => (
  <ThemeProvider theme={theme}>
    <Box/>
  </ThemeProvider>
)

👩‍🎤 Emotion

Installation

npm install @emotion/{styled,react} styled-breakpoints@latest

# or

yarn add @emotion/{styled,react} styled-breakpoints@latest

emotion.d.ts

import '@emotion/react';
import { StyledBreakpointsTheme } from 'styled-breakpoints';

declare module '@emotion/react' {
  export interface Theme extends StyledBreakpointsTheme {}
}

app.tsx

import styled, from '@emotion/styled';
import { Theme, ThemeProvider } from '@emotion/react';
import { createStyledBreakpointsTheme } from 'styled-breakpoints';

const Box = styled.div`
  display: none;

  ${({ theme }) => theme.breakpoints.up('sm')} {
    display: block;
  }
`;

const theme: Theme = createStyledBreakpointsTheme();

const App = () => (
  <ThemeProvider theme={theme}>
    <Box />
  </ThemeProvider>
);

🏎️  Migration from v11.2.3

Theme

The createTheme function has been replaced with createStyledBreakpointsTheme.

- import { createTheme } from "styled-breakpoints";

- const theme = createTheme();



+ import { createStyledBreakpointsTheme } from "styled-breakpoints";

+ const theme = createStyledBreakpointsTheme();

Breakpoint Functions

Additionally, the functions up, down, between, and only have been moved to the theme object. This means that you no longer need to import them individually each time you want to use them.

- import { up } from "styled-breakpoints";

- const Box = styled.div`
-  ${up('md')} {
-     background-color: red;
-  }


+ const Box = styled.div`
+  ${({ theme }) => theme.breakpoints.up('md')} {
+     background-color: red;
+  }
`

Hooks

- import { up } from 'styled-breakpoints';
- import { useBreakpoint } from 'styled-breakpoints/react-styled';

or

- import { up } from 'styled-breakpoints';
- import { useBreakpoint } from 'styled-breakpoints/react-emotion';

- const Example = () => {
-   const isMd = useBreakpoint(only('md'));
-
-   return <Layout>{isMd && </Box>}</Layout>
- }

+ import { useMediaQuery } from 'styled-breakpoints/use-media-query';

+ const Example = () => {
+   const isMd = useMediaQuery(useTheme()?.breakpoints.only('md'));
+
+   return <Layout>{isMd && </Box>}</Layout>
+ }

Media queries

• 🚀 Caching is implemented in all functions to optimize performance.

Min-width

Type declaration

  declare function up(
    min: string,
    orientation?: 'portrait' | 'landscape'
  ) => string

const Box = styled.div`
  display: none;

  ${({ theme }) => theme.breakpoints.up('sm')} {
    display: block;
  }
`;

Convert to pure css:

@media (min-width: 768px) {
  display: block;
}

---

Max-width

We occasionally use media queries that go in the other direction (the given screen size or smaller):

Type declaration

  declare function down(
    max: string,
    orientation?: 'portrait' | 'landscape'
  ) => string

const Box = styled.div`
  display: block;

  ${({ theme }) => theme.breakpoints.down('md')} {
    display: none;
  }
`;

Convert to:

@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

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

Type declaration

  declare function only(
    name: string,
    orientation?: 'portrait' | 'landscape'
  ) => string

const Box = styled.div`
  background-color: pink;

  ${({ theme }) => theme.breakpoints.only('md')} {
    background-color: rebeccapurple;
  }
`;

Convert to:

@media (min-width: 768px) and (max-width: 991.98px) {
  background-color: rebeccapurple;
}

---

Between breakpoints

Similarly, media queries may span multiple breakpoint widths.

Type declaration

 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;
  }
`;

Convert to:

@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 324b.

Type declaration

 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 isMd = useMediaQuery(useTheme()?.breakpoints.only('md'));

  return <AnotherComponent>{isMd && <Box />}</AnotherComponent>;
};

Customization

⚙️ Strict Typed Breakpoints

app.tsx

import styled, { DefaultTheme } from 'styled-components'; // or from '@emotion/react'
import { createStyledBreakpointsTheme } from 'styled-breakpoints';

export const breakpoints = {
  small: '0px',
  medium: '640px',
  large: '1024px',
  xLarge: '1200px',
  xxLarge: '1440px',
} as const;

const theme: DefaultTheme = createStyledBreakpointsTheme({
  breakpoints,
});

const App = () => (
  <ThemeProvider theme={theme}>
    <Box />
  </ThemeProvider>
);

💅 Styled Components

styled.d.ts

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

type Min = keyof typeof breakpoints;

// For max values remove the first key.
type Max = Exclude<keyof typeof breakpoints, 'small'>;

declare module 'styled-components' {
  export interface DefaultTheme {
    breakpoints: MediaQueries<Min, Max>;
  }
}

👩‍🎤 Emotion

emotion.d.ts

import '@emotion/react';
import { MediaQueries } from 'styled-breakpoints';
import { breakpoints } from './app';

type Min = keyof typeof breakpoints;

// For max values remove the first key.
type Max = Exclude<keyof typeof breakpoints, 'small'>;

declare module '@emotion/react' {
  export interface Theme extends {
    breakpoints: MediaQueries<Min, Max>;
  }
}

🎨 Merge with another theme

app.tsx

import { DefaultTheme, ThemeProvider } from 'styled-components'; // or from '@emotion/react';
import { createStyledBreakpointsTheme } from 'styled-breakpoints';

export const primaryTheme = {
  fonts: ['sans-serif', 'Roboto'],
  fontSizes: {
    small: '1em',
    medium: '2em',
    large: '3em',
  },
} as const;

const const theme: DefaultTheme = {
  ...primaryTheme,
  ...createStyledBreakpointsTheme(),
}

const App = () => (
  <ThemeProvider theme={theme}>
    <Box />
  </ThemeProvider>
);

💅 Styled Components

styled.d.ts

import 'styled-components';
import { StyledBreakpointsTheme } from 'styled-breakpoints';
import { primaryTheme } from './app';

type PrimaryTheme = typeof primaryTheme;

declare module 'styled-components' {
  export interface DefaultTheme extends StyledBreakpointsTheme, PrimaryTheme {}
}

👩‍🎤 Emotion

emotion.d.ts

import '@emotion/react';
import { StyledBreakpointsTheme } from 'styled-breakpoints';
import { primaryTheme } from './app';

type PrimaryTheme = typeof primaryTheme;

declare module '@emotion/react' {
  export interface Theme extends PrimaryTheme, StyledBreakpointsTheme {}
}

License

MIT License

Copyright (c) 2018-2019 Maxim Alyoshin.

This project is licensed under the MIT License - see the LICENSE file for details.

Contributors

Thanks goes to these wonderful people (emoji key):

Maxim 💻 🎨 📖 💡 🤔 📢	Abu Shamsutdinov 💻 💡 🤔 👀 📢	Sergey Sova 💻 💡 🤔 👀 📢	Jussi Kinnula 🐛 💻	Rafał Wyszomirski 📖	Adrian Celczyński 🐛 💻	Alexey Olefirenko 💻 🤔
samholmes 💻 🤔	Ontopic 🤔	Ryan Bell 🤔	Bart Nagel 🐛 💻 💡 🤔	Greg McKelvey 💻	Buck DeFore 🤔	Pierre Burel 🐛
Konstantin 🐛 💻	Pawel Kochanek 🐛 💻	Ian Christopher B. de Jesus 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!

Changelog

12.1.5 (2023-07-20)

Bug Fixes

• docs: add [@latest](https://github.com/latest) tag to the installation instructions (#1562) (b914155)