jameslnewell / Styled Components Breakpoint
Utility function for using breakpoints with styled-components 💅.
Stars: ✭ 231
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Styled Components Breakpoint
Styled Breakpoints
Simple and powerful tool for creating breakpoints in styled components and emotion. 💅
Stars: ✭ 428 (+85.28%)
Mutual labels: media, styled-components, breakpoint
media-blender
Easy and predictable SASS/SCSS media queries
Stars: ✭ 26 (-88.74%)
Mutual labels: breakpoint, media
React Flexa
Responsive React Flexbox (CSS Flexible Box Layout Module) grid system based heavily on the standard CSS API.
Stars: ✭ 120 (-48.05%)
Mutual labels: styled-components, breakpoint
styled-media-helper
💅 Helps manage media queries with styled components
Stars: ✭ 76 (-67.1%)
Mutual labels: breakpoint, media
Mq Scss
Extremely powerful Sass media query mixin. Allows you to create almost any media query you can imagine.
Stars: ✭ 122 (-47.19%)
Mutual labels: media, breakpoint
Backend
Media Cloud is an open source, open data platform that allows researchers to answer quantitative questions about the content of online media.
Stars: ✭ 211 (-8.66%)
Mutual labels: media
Gridtab
GridTab is a lightweight jQuery plugin to create grid based responsive tabs https://gopalraju.github.io/gridtab
Stars: ✭ 210 (-9.09%)
Mutual labels: breakpoint
Styled Components Spacing
Responsive margin and padding components for styled-components 💅.
Stars: ✭ 209 (-9.52%)
Mutual labels: styled-components
React World
✨🌌 A different web experience in 8 bit React.js World
Stars: ✭ 230 (-0.43%)
Mutual labels: styled-components
Meemooapp
Creative apps to use, build, share, and hack in the browser.
Stars: ✭ 220 (-4.76%)
Mutual labels: media
Next Blog Firestore
Example of blog built with React, Next.js, Firebase Firestore, Styled-Component, Mobx State Tree and other cool technologies
Stars: ✭ 219 (-5.19%)
Mutual labels: styled-components
Jpsxdec
jPSXdec: cross-platform PlayStation 1 audio and video converter
Stars: ✭ 219 (-5.19%)
Mutual labels: media
Artipub
Article publishing platform that automatically distributes your articles to various media channels
Stars: ✭ 2,685 (+1062.34%)
Mutual labels: media
Flexi
Just a layout framework. Design for cross-platform with ease.
Stars: ✭ 220 (-4.76%)
Mutual labels: breakpoint
Yt Dlc
media downloader and library for various sites.
Stars: ✭ 2,590 (+1021.21%)
Mutual labels: media
styled-components-breakpoint
Utility functions for creating breakpoints in styled-components
💅.
Have a look 👀 at
styled-components-spacing
andstyled-components-grid
which both work well with this package.
Installation
yarn add styled-components styled-components-breakpoint
Usage
Using the default breakpoints
./Heading.jsx
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
import React from 'react';
import Heading from './Heading';
<Heading>Hello World!</Heading>
Using custom breakpoints
Breakpoints may be customised using ThemeProvider
. For example, to use the same breakpoints as Bootstrap, you can do so like this:
./Heading.jsx
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
import React from 'react';
import {ThemeProvider} from 'styled-components';
const theme = {
breakpoints: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200
}
};
<ThemeProvider theme={theme}>
<Heading>Hello World!</Heading>
</ThemeProvider>
API
breakpoint(gte)
breakpoint(gte, lt)
Wraps styles in a @media
block.
Properties:
-
gte
- Required. Astring
. The name of the breakpoint from which the styles will apply. -
lt
- Optional. Astring
. The name of the breakpoint at which the styles will no longer apply.
Returns:
The @media
block.
Example:
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;
`};
`;
<Thing/>
Output:
.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}
orT
. 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:
import styled from 'styled-components';
import {map} from 'styled-components-breakpoint';
const Thing = styled.div`
${({size}) => map(size, val => `width: ${Math.round(val * 100)}%;`)}
`;
<Thing size={{mobile: 1, tablet: 1/2, desktop: 1/4}}/>
Output:
.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, thebreakpoint
andmap
functions
Example:
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;
`};
`;
<Thing/>
Output:
.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:
{
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)
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].