This repository was archived by the owner on Apr 25, 2021. It is now read-only.
Added StyleSheet higher order component
When building responsive applications in react, it's common to implement styles for each breakpoint and then apply them like so:
const commonStyle = {
backgroundColor: 'red',
}
const styles = {
element: {
...commonStyle,
color: 'blue',
},
elementThin: {
...commonStyle,
color: 'black',
}
}
// somewhere in your component...
<div style={browser.lessThan.medium ? styles.elementThin : styles.element} />However this become very repetitive rather quickly. To help, redux-responsive provides a higher-order component for managing these styles. The follow is equivalent to the logic above:
import {StyleSheet} from 'redux-responsive'
const stylesheet = {
element: {
backgroundColor: 'red',
color: 'blue',
_lessThan_medium: {
color: 'black',
}
}
}
const component = StyleSheet(stylesheet)(({styles}) => (
<div style={styles.element} />
))