styled-breakpoints
TypeScript icon, indicating that this package has built-in type declarations

14.1.3 • Public • Published


styled-breakpoints
GitHub Workflow Status coverage status npm bundle size npm downloads npm version

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

Styled Components Logo     OR    Emotion logo



🌼 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(),
};


💅 Using with Styled Components

🚩 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 {}
}


👩‍🎤 Using with Emotion

🚩 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


Type declaration
  declare function up(
    min: T,
    orientation?: 'portrait' | 'landscape'
  ) => string
const Box = styled.div`
  display: none;

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

Will be converted to pure css:
@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):


Type declaration
  declare function down(
    max: string,
    orientation?: 'portrait' | 'landscape'
  ) => string
const Box = styled.div`
  display: block;

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

Will be converted to pure css:
@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.


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

Will be converted to pure css:
@media (min-width: 768px) and (max-width: 991.98px) {
  background-color: rebeccapurple;
}


Breakpoints range - between

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

Will be converted to pure css:
@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.

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 { 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

mg901
mg901

💬 💻 🎨 📖 💡 🚇 🚧 📆 📣 🔬 👀 ⚠️ 🔧
Abu Shamsutdinov
Abu Shamsutdinov

🐛 💻 💡 🤔 👀 📢
Sova
Sova

💻 💡 🤔 👀 📢
Jussi Kinnula
Jussi Kinnula

🐛 💻
Rafał Wyszomirski
Rafał Wyszomirski

📖
Adrian Celczyński
Adrian Celczyński

🐛 💻
Sam Holmes
Sam Holmes

💻 🤔
Ontopic
Ontopic

🤔
Ryan Bell
Ryan Bell

🤔
Bart Nagel
Bart Nagel

🐛 💻 💡 🤔
Greg McKelvey
Greg McKelvey

💻
Buck DeFore
Buck DeFore

🤔
Pierre Burel
Pierre Burel

🐛
Pawel Kochanek
Pawel Kochanek

🐛 💻
Ian Christopher B. de Jesus
Ian Christopher B. de Jesus

🐛
David de Lusenet
David de Lusenet

🐛 🤔

Package Sidebar

Install

npm i styled-breakpoints

Weekly Downloads

14,245

Version

14.1.3

License

MIT

Unpacked Size

36.4 kB

Total Files

17

Last publish

Collaborators

  • mg901