- Notifications
You must be signed in to change notification settings - Fork17
jameslnewell/styled-components-breakpoint
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Utility functions for creating breakpoints instyled-components 💅.
Have a look 👀 at
styled-components-spacingandstyled-components-gridwhich both work well with this package.
yarn add styled-components styled-components-breakpoint
./Heading.jsx
importstyledfrom'styled-components';importbreakpointfrom'styled-components-breakpoint';constHeading=styled.h1` color: #444; font-family: sans-serif; font-size: 12px;${breakpoint('tablet')` font-size: 16px; `}${breakpoint('desktop')` font-size: 24px; `}`;exportdefaultHeading;
./index.jsx
importReactfrom'react';importHeadingfrom'./Heading';<Heading>Hello World!</Heading>
Breakpoints may be customised usingThemeProvider. For example, to use the same breakpoints asBootstrap, you can do so like this:
./Heading.jsx
importstyledfrom'styled-components';importbreakpointfrom'styled-components-breakpoint';constHeading=styled.h1` color: #444; font-family: sans-serif;${breakpoint('sm')` font-size: 12px; `}${breakpoint('md')` font-size: 16px; `}${breakpoint('lg')` font-size: 24px; `}`;exportdefaultHeading;
./index.jsx
importReactfrom'react';import{ThemeProvider}from'styled-components';consttheme={breakpoints:{xs:0,sm:576,md:768,lg:992,xl:1200}};<ThemeProvidertheme={theme}><Heading>Hello World!</Heading></ThemeProvider>
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.
importstyledfrom'styled-components';importbreakpointfrom'styled-components-breakpoint';constThing=styled.div` font-size: 12px;${breakpoint('tablet')` font-size: 16px; `};${breakpoint('desktop')` font-size: 24px; `};`;<Thing/>
.cESAFm {font-size:12px;}@media (min-width:46.0625em) { .cESAFm {font-size:16px; }}@media (min-width:64.0625em) { .cESAFm {font-size:24px; }}
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.
importstyledfrom'styled-components';import{map}from'styled-components-breakpoint';constThing=styled.div`${({size})=>map(size,val=>`width:${Math.round(val*100)}%;`)}`;<Thingsize={{mobile:1,tablet:1/2,desktop:1/4}}/>
.cESAFm {width:100%;}@media (min-width:46.0625em) { .cESAFm {width:50%; }}@media (min-width:64.0625em) { .cESAFm {width:25%; }}
Creates a static set of breakpoints which aren't themable.
Properties:
breakpoints- Optional.{[string]: number}. A map of breakpoint names and sizes.
Returns:
- an
objectcontaining the breakpoints, thebreakpointandmapfunctions
importstyledfrom'styled-components';import{createStatic}from'styled-components-breakpoint';constbreakpoints=createStatic();constThing=styled.div` font-size: 12px;${breakpoints.tablet` font-size: 16px; `};${breakpoints.desktop` font-size: 24px; `};`;<Thing/>
.cESAFm {font-size:12px;}@media (min-width:46.0625em) { .cESAFm {font-size:16px; }}@media (min-width:64.0625em) { .cESAFm {font-size:24px; }}
The default breakpoints are:
{mobile:0,// targeting all devicestablet: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)}
About
Utility function for using breakpoints with styled-components 💅.
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.