Awesome Open Source
Awesome Open Source


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

Simple and powerful tool for creating media queries with

styled-components ย ย ย ย ORย ย ย  emotion

Documentation

Examples

Getting Started

API

Examples

Mobile First

From smallest to largest

Edit mobile-first

Desktop First

From largest to smallest

Edit desktop first example

Hooks API

Styled Components

Hooks api (styled-components)

Emotion

Hooks api (Emotion)

Getting Started

Installation

npm install styled-breakpoints

# or

yarn add styled-breakpoints

Default breakpoints

{
  xs: '0px',
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
}
import { up, down, between, only } from 'styled-breakpoints';

const Component = styled.div`
  color: black;

  ${only('md')} {
    color: rebeccapurple;
  }
`;

Custom breakpoints

import { up, down, between, only } from 'styled-breakpoints';

const theme = {
  breakpoints: {
    sm: '576px',
    md: '768px',
    lg: '992px',
    xl: '1200px',
  },
};

const Component = styled.div`
  color: black;

  ${only('sm')} {
    color: rebeccapurple;
  }

  ${between('sm', 'md')} {
    color: hotpink;
  }

  ${down('lg')} {
    color: lightcoral;
  }

  ${up('xl')} {
    color: hotpink;
  }
`;

<ThemeProvider theme={theme}>
  <Component>This is cool!</Component>
</ThemeProvider>;

Object notation

When using object notation, make sure to explicitly pass props to breakpoint methods. Please see the example below using default configuration:

import { down, between } from 'styled-breakpoints';

const Component = styled('div')((props) => ({
  color: 'black',
  [down('md')(props)]: {
    color: 'lightcoral',
  },
  [between('sm', 'md')(props)]: {
    color: 'hotpink',
  },
}));

Hooks API

Styled Components

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

Emotion

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


API

Core API is inspired by Bootstrap responsive breakpoints.

All incoming values are converted to em

For example, let's take default values of breakpoints.

up

/**
 *
 * @param {string} min-width
 * @param {string} [orientation]
 *
 * @return {string} media query
 */
up('md') => '@media (min-width: 768px) { ... }'

down

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

/**
 *
 * @param {string} max-width
 * @param {string} [orientation]
 *
 * @return {string} media query
 */
  down('md') => '@media (max-width: 991.98px) { ... }'

Note that since browsers do not currently support range context queries, 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 for these comparisons.


Similarly, media queries may span multiple breakpoint widths:

between

/**
 *
 * @param {string} min-width
 * @param {string} max-width
 * @param {string} [orientation]
 *
 * @return {string} media query
 */
between('md', 'lg') => '@media (min-width: 768px) and (max-width: 1199.98px) { ... }'

only

/**
 *
 * @param {string} min-width
 * @param {string} [orientation]
 *
 * @return {string} media query
 */
only('md') => '@media (min-width: 768px) and (max-width: 991.98px) { ... }'

useBreakpoint

/**
 * @param {function} up | down | between | only
 *
 * @return {(boolean|null)} `true` if currently matching the given query,
 *                          `false` if not, and `null` if unknown (such as
 *                          during server-side rendering)
 */
useBreakpoint(up('md')) => boolean | null

Other

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

๐Ÿ’ป

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



Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,511,655)ย 
Typescript (251,857)ย 
Reactjs (72,668)ย 
Styled Components (3,566)ย 
Media (854)ย 
Preact (793)ย 
Css In Js (572)ย 
Emotion (552)ย 
Media Queries (266)ย 
Related Projects
Advertising ๐Ÿ“ฆย 9
All Projects
Application Programming Interfaces ๐Ÿ“ฆย 120
Applications ๐Ÿ“ฆย 181
Artificial Intelligence ๐Ÿ“ฆย 72
Blockchain ๐Ÿ“ฆย 70
Build Tools ๐Ÿ“ฆย 111
Cloud Computing ๐Ÿ“ฆย 79
Code Quality ๐Ÿ“ฆย 28
Collaboration ๐Ÿ“ฆย 30
Command Line Interface ๐Ÿ“ฆย 48
Community ๐Ÿ“ฆย 81
Companies ๐Ÿ“ฆย 60
Compilers ๐Ÿ“ฆย 60
Computer Science ๐Ÿ“ฆย 74
Configuration Management ๐Ÿ“ฆย 39
Content Management ๐Ÿ“ฆย 167
Control Flow ๐Ÿ“ฆย 197
Data Formats ๐Ÿ“ฆย 77
Data Processing ๐Ÿ“ฆย 266
Data Storage ๐Ÿ“ฆย 132
Economics ๐Ÿ“ฆย 60
Frameworks ๐Ÿ“ฆย 198
Games ๐Ÿ“ฆย 122
Graphics ๐Ÿ“ฆย 103
Hardware ๐Ÿ“ฆย 148
Integrated Development Environments ๐Ÿ“ฆย 47
Learning Resources ๐Ÿ“ฆย 147
Legal ๐Ÿ“ฆย 28
Libraries ๐Ÿ“ฆย 119
Lists Of Projects ๐Ÿ“ฆย 21
Machine Learning ๐Ÿ“ฆย 336
Mapping ๐Ÿ“ฆย 61
Marketing ๐Ÿ“ฆย 15
Mathematics ๐Ÿ“ฆย 55
Media ๐Ÿ“ฆย 228
Messaging ๐Ÿ“ฆย 97
Networking ๐Ÿ“ฆย 304
Operating Systems ๐Ÿ“ฆย 84
Operations ๐Ÿ“ฆย 120
Package Managers ๐Ÿ“ฆย 52
Programming Languages ๐Ÿ“ฆย 229
Runtime Environments ๐Ÿ“ฆย 96
Science ๐Ÿ“ฆย 42
Security ๐Ÿ“ฆย 375
Social Media ๐Ÿ“ฆย 26
Software Architecture ๐Ÿ“ฆย 70
Software Development ๐Ÿ“ฆย 68
Software Performance ๐Ÿ“ฆย 57
Software Quality ๐Ÿ“ฆย 127
Text Editors ๐Ÿ“ฆย 45
Text Processing ๐Ÿ“ฆย 131
User Interface ๐Ÿ“ฆย 310
User Interface Components ๐Ÿ“ฆย 465
Version Control ๐Ÿ“ฆย 29
Virtualization ๐Ÿ“ฆย 68
Web Browsers ๐Ÿ“ฆย 38
Web Servers ๐Ÿ“ฆย 25
Web User Interface ๐Ÿ“ฆย 194