Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jameslnewell/styled-components-breakpoint
Utility function for using breakpoints with styled-components 💅.
https://github.com/jameslnewell/styled-components-breakpoint
breakpoint breakpoints media react styled-components
Last synced: 9 days ago
JSON representation
Utility function for using breakpoints with styled-components 💅.
- Host: GitHub
- URL: https://github.com/jameslnewell/styled-components-breakpoint
- Owner: jameslnewell
- Created: 2017-02-07T20:24:32.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-10-12T15:33:13.000Z (over 2 years ago)
- Last Synced: 2024-06-18T12:45:49.027Z (10 days ago)
- Topics: breakpoint, breakpoints, media, react, styled-components
- Language: JavaScript
- Homepage:
- Size: 3.45 MB
- Stars: 242
- Watchers: 3
- Forks: 17
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Lists
- awesome-stars - jameslnewell/styled-components-breakpoint - Utility function for using breakpoints with styled-components 💅. (JavaScript)
- awesome-github-star - styled-components-breakpoint - components 💅. | jameslnewell | 240 | (JavaScript)
README
# styled-components-breakpoint
   [](https://travis-ci.org/jameslnewell/styled-components-breakpoint)
Utility functions for creating breakpoints in `styled-components` 💅.
> [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)
> Have a look 👀 at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.
## Installation
```bash
yarn add styled-components styled-components-breakpoint
```
## Usage
> [Examples](https://jameslnewell.github.io/styled-components-breakpoint/)
### Using the default breakpoints
`./Heading.jsx`
```js
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`
```js
import React from 'react';
import Heading from './Heading';
Hello World!
```
### Using custom breakpoints
Breakpoints may be customised using `ThemeProvider`. For example, to use the same breakpoints as [Bootstrap](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints), you can do so like this:
`./Heading.jsx`
```js
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`
```js
import React from 'react';
import {ThemeProvider} from 'styled-components';
const theme = {
breakpoints: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200
}
};
Hello World!
```
## API
### `breakpoint(gte)`
### `breakpoint(gte, lt)`
Wraps styles in a `@media` block.
**Properties:**
- `gte` - Required. A `string`. The name of the breakpoint from which the styles will apply.
- `lt` - Optional. A `string`. The name of the breakpoint at which the styles will no longer apply.
**Returns:**
The `@media` block.
##### Example:
```js
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;
`};
`;
```
##### Output:
```css
.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}` or `T`. 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:
```js
import styled from 'styled-components';
import {map} from 'styled-components-breakpoint';
const Thing = styled.div`
${({size}) => map(size, val => `width: ${Math.round(val * 100)}%;`)}
`;
```
##### Output:
```css
.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 `object` containing the breakpoints, the `breakpoint` and `map` functions
##### Example:
```js
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;
`};
`;
```
##### Output:
```css
.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:
```js
{
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)
}
```