Quick Start

npm install --save styled-components styled-responsive

import react from 'react';
import styled from 'styled-components';
import { media, mediaFromProps } from 'styled-responsive';

const Text = styled.span`
    ${ media('xs_')`
      font-size: 1em;
      padding: 1em;
    `}
    ${ media('sm_')`
      font-size: 1.3em;
      padding: 1.3em;
    `}
    ${ media('md_')`
      font-size: 2em;
      padding: 2em;
    `}  
    ${ (props) => { return mediaFromProps( {}, props) } }  
`

const myOtherComponent = props => {
    const styles = {
        xs: {
            margin:'5px',
            backgroundColor:'papayawhip',
            fontFamily:'sans-serif',
            color:'tomato',
        }
    }

    return <Text xs_={{styles.xs}} sm_color='darkseagreen' md_backgroundColor='aliceblue'>Hello</Text>
}

Result:

Getting Started

The goal is to be able to design anything with responsiveness in mind. So far, we provide two ways:

1. Component side

Here you explictly specify style rules for each breakpoints within your component.

//myComponents/Text.js
import styled from 'styled-components';
import { media } from 'styled-responsive';

const Text = styled.span`
  ${ media('sm_')`
    // everything here will apply under the 'sm' breakpoint and up
    font-size: 1em;
  `}
  ${ media('xl_')`
    // everything here will apply under the 'xl' breakpoint and up
    font-size: 2em;
  `}  
`
export default Text

2. From props

Here you add superpowers to your components: authorizing breakpoint-based style props.

//myComponents/Text.js
import styled from 'styled-components'
import { mediaFromProps } from 'styled-responsive'

const Text = styled.span`
  ${ (props) => { return mediaFromProps( {}, props) } }
`
export default Text

Now just use whatever camelcased css and put any of xs_, sm_, md_, lg_ or xl_ in front of it: properties will apply according to each breakpoint.

For example:

• xs_backgroundColor:'red' will apply backgroundColor:'red' from the xs_ breakpoint and up.
• sm_display:'none' will apply display:'none' from the sm_ breakpoint and up.
• md_fontSize:'1em' will apply fontSize:'1em' from the md_ breakpoint and up.
• lg_paddingRight:'5px' will apply paddingRight:'5px' from the lg_ breakpoint and up.
• xl_minHeight:'300px' will apply minHeight:'300px' from the xl_ breakpoint and up.

...got it?!

Wait... you can also provide an object to any of these prefixed props. For example:

• xs_={{backgroundColor:'red', fontSize:'1em', padding:'1em'}}
• sm_={{backgroundColor:'green', fontSize:'2em', padding:'2em'}}
• md_={{backgroundColor:'blue', fontSize:'3em', padding:'3em'}}
• lg_={{backgroundColor:'pink', fontSize:'4em', padding:'4em'}}
• xl_={{backgroundColor:'orange', fontSize:'5em', padding:'5em'}}

Obviously, you can combine both at will. So this is valid:

<MyComponent xs_={{backgroundColor:'red', fontSize:'1em', padding:'1em'}} xs_fontSize='3em' />

As in the style prop, the last property always replaces previous ones. This means that, in our example, fontSize will be set to the latest assigned value: xs_fontSize='3em'.

Back to our Text component, we could consume it like this:

//OtherComponent.js
import React, { Component } from 'react'
import Text from './myComponents/Text.js'

class OtherComponent extends Component {
  //...
  render(){
    const styles = {
      medium: {backgroundColor:'pink'}
    }

    return(
      <Text xs_backgroundColor='red' sm_={{backgroundColor:'white'}} md_={styles.medium} lg_backgroundColor='green' xl_backgroundColor='blue'/>
    )
  }
}
`

Here, Text will display a span with a...

• ...red background on xs_ breakpoint and up
• ...white background on sm_ breakpoint an up
• ...pink background on md_ breakpoint an up
• ...green background on lg_ breakpoint an up
• ...blue background on xl_ breakpoint an up

Customizing Breakpoints

styled-responsive comes with most common breakpoints:

const defaultBreakpoints = {
  xs_:'only screen and (min-width: 0px)',
  sm_:'only screen and (min-width: 576px)',
  md_:'only screen and (min-width: 768px)',
  lg_:'only screen and (min-width: 992px)',
  xl_:'only screen and (min-width: 1200px)'
}

Now, who are we to impose those to you ?! Just override it ! You can easily apply your own media queries by creating a similar object like:

//myBreakpoints.js
export const myBreakpoints = {
  phones_: 'only screen and (min-width: 0px)',
  tablets_: 'only screen and (min-width: 400px)',
  desktops_: 'only screen and (min-width: 800px)'
}

Note: all standard media queries are available to you, so you are free to define more complex queries matching your use-cases like portrait, max-width, min-height etc...

Now, you can provide it to media() :

import myBreakpoints from './myBreakpoints.js'

const Text = styled.span`
  ${ media('phones_', myBreakpoints)`
    // everything here will apply under the 'phones_' breakpoint and up
    font-size: 1em;
  `}
  ${ media('desktops_', myBreakpoints)`
    // everything here will apply under the 'desktops_' breakpoint and up
    font-size: 2em;
  `}  
`

or mediaFromProps() :

import myBreakpoints from './myBreakpoints.js'

const Text = styled.span`
  ${ (props) => { return mediaFromProps( {breakpoints:myBreakpoints}, props) } }
`

Obviously, if you change breakpoints names, your responsive props should be prefixed accordingly. In our example, we now should use prefixes phones_, tablets_ and desktops_ instead of the default ones (xs_, sm_, md_ etc...), like:

<MyComponent phones_={{backgroundColor:'red', fontSize:'1em', padding:'1em'}} desktops_fontSize='3em' />

Shortcuts

We are really lazy... so we created shortcuts properties that just translates into classic [longer] properties. This enables us to write p:'10px' which will translate to padding:'10px', or mb:'5px' which is the same as writing marginBottom:5px... Thinking this way, we also ship react-native's Vertical and Horizontal helpers for a few classic properties like padding, margin and border. So you can write mh:'auto' which is strictly the same as writing marginLeft:'auto', marginRight:'auto'. ...cool, right ?!

Here is the complete shortcuts list:

Shortcut	Translates into...	Example	Translated example:
w	width	w:'100px'	width:'100px'
h	height	h:'100px'	height:'100px'
minW	minWidth	minW:'100px'	minWidth:'100px'
minH	minHeight	minH:'100px'	minHeight:'100px'
maxW	maxWidth	maxW:'100px'	maxWidth:'100px'
maxH	maxHeight	maxH:'100px'	maxHeight:'100px'
bg	background	bg:'red'	background:'red'
bgColor	backgroundColor	bgColor:'red'	backgroundColor:'red'
wrap	flexWrap:'wrap'	wrap	flexWrap:'wrap'
nowrap	flexWrap:'nowrap'	nowrap	flexWrap:'nowrap'
grow	flexGrow:1	grow:{2}	flexGrow:2
shrink	flexShrink:1	shrink:{2}	flexShrink:2
basis	flexBasis:'auto'	basis:{1/3}	flexBasis:'33.3333333%'
		basis:'100px'	flexBasis:'100px'
		basis:'50%'	flexBasis:'50%'
		basis:{0}	flexBasis:0
row	flexDirection: 'row'	row	flexDirection: 'row'
column	flexDirection: 'column'	column	flexDirection: 'column'
scroll	overflow: 'auto'	scroll	overflow: 'auto'
noscroll	overflow: 'hidden'	noscroll	overflow: 'hidden'
hide	display: 'none'	hide	display: 'none'
show	display: 'flex'	show	display: 'flex'
relative	position: 'relative'	relative	position: 'relative'
absolute	position: 'absolute'	absolute	position: 'absolute'
alignStart	alignItems: 'flex-start'	alignStart	alignItems: 'flex-start'
alignCenter	alignItems: 'center'	alignCenter	alignItems: 'center'
alignEnd	alignItems: 'flex-end'	alignEnd	alignItems: 'flex-end'
alignStretch	alignItems: 'stretch'	alignStretch	alignItems: 'stretch'
alignMeStart	alignSelf: 'flex-start'	alignMeStart	alignSelf: 'flex-start'
alignMeCenter	alignSelf: 'center'	alignMeCenter	alignSelf: 'center'
alignMeEnd	alignSelf: 'flex-end'	alignMeEnd	alignSelf: 'flex-end'
alignMeStretch	alignSelf: 'stretch'	alignMeStretch	alignSelf: 'stretch'
justifyStart	justifyContent: 'flex-start'	justifyStart	justifyContent: 'flex-start'
justifyCenter	justifyContent: 'center'	justifyCenter	justifyContent: 'center'
justifyEnd	justifyContent: 'flex-end'	justifyEnd	justifyContent: 'flex-end'
justifySpaceAround	justifyContent: 'space-around'	justifySpaceAround	justifyContent: 'space-around'
justifySpaceBetween	justifyContent: 'space-between'	justifySpaceBetween	justifyContent: 'space-between'
wrapStart	justifyItems: 'flex-start'	wrapStart	justifyItems: 'flex-start'
wrapCenter	justifyItems: 'center'	wrapCenter	justifyItems: 'center'
wrapEnd	justifyItems: 'flex-end'	wrapEnd	justifyItems: 'flex-end'
wrapSpaceAround	justifyItems: 'space-around'	wrapSpaceAround	justifyItems: 'space-around'
wrapSpaceBetween	justifyItems: 'space-between'	wrapSpaceBetween	justifyItems: 'space-between'
p	padding	p:'5px'	padding:'5px'
pt	paddingTop	pd:'5px'	paddingTop:'5px'
pr	paddingRight	pr:'5px'	paddingRight:'5px'
pb	paddingBottom	pb:'5px'	paddingBottom:'5px'
pl	paddingLeft	pl:'5px'	paddingLeft:'5px'
pv	paddingTop + paddingBottom	pv:'5px'	paddingTop:'5px', paddingBottom:'5px'
ph	paddingLeft + paddingRight	ph:'5px'	paddingLeft:'5px', paddingRight:'5px'
paddingVertical	paddingTop + paddingBottom	paddingVertical:'5px'	paddingTop:'5px', paddingBottom:'5px'
paddingHorizontal	paddingLeft + paddingRight	paddingHorizontal:'5px'	paddingLeft:'5px', paddingRight:'5px'
m	margin	m:'5px'	margin:'5px'
mt	marginTop	md:'5px'	marginTop:'5px'
mr	marginRight	mr:'5px'	marginRight:'5px'
mb	marginBottom	mb:'5px'	marginBottom:'5px'
ml	marginLeft	ml:'5px'	marginLeft:'5px'
mv	marginTop + marginBottom	mv:'5px'	marginTop:'5px', marginBottom:'5px'
mh	marginLeft + marginRight	mh:'5px'	marginLeft:'5px', marginRight:'5px'
marginVertical	marginTop + marginBottom	marginVertical:'5px'	marginTop:'5px', marginBottom:'5px'
marginHorizontal	marginLeft + marginRight	marginHorizontal:'5px'	marginLeft:'5px', margin:'5px'
b	borderWidth	b:'5px'	borderWidth:'5px'
bt	borderTopWidth	bd:'5px'	borderTopWidth:'5px'
br	borderRightWidth	br:'5px'	borderRightWidth:'5px'
bb	borderBottomWidth	bb:'5px'	borderBottomWidth:'5px'
bl	borderLeftWidth	bl:'5px'	borderLeftWidth:'5px'
bv	borderTopWidth + borderBottomWidth	bv:'5px'	borderTopWidth:'5px', borderBottomWidth:'5px'
bh	borderLeftWidth + borderRightWidth	bh:'5px'	borderLeftWidth:'5px', borderRightWidth:'5px'

Overriding shortcuts

We don't think miliseconds lost for shortcut processing are a big pain when compared to gain in code readibility... however, for purists who just want to pass their way on this one, we provide options to override it.

1. overriding it completely: meaning "don't do it".

In the mediaFromProps() function, just specify it like this:

import myBreakpoints from './myBreakpoints.js'

const Text = styled.span`
  ${ (props) => { return mediaFromProps( {breakpoints:myBreakpoints, translatorFunc:false}, props) } }
`

Note how translatorFunc:false is part of the same object as {breakpoints}.

2. overriding using your own sbortcuts: meaning "I prefer mine".

In the mediaFromProps() function, just specify it like this:

import myBreakpoints from './myBreakpoints.js'
import myFunc from './myFunc.js'

const Text = styled.span`
  ${ (props) => { return mediaFromProps( {breakpoints:myBreakpoints, translatorFunc:myFunc}, props) } }
`

Note how translatorFunc:myFunc is part of the same object as {breakpoints}.

You can copy our mapTranslator.js file as a starter, and add/remove properties you need.

Todo

• test with react-native
• write unit-tests