Skip to content
This repository was archived by the owner on Apr 25, 2021. It is now read-only.

Added StyleSheet higher order component

Choose a tag to compare

@AlecAivazis AlecAivazis released this 16 May 17:06
· 222 commits to master since this release

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} />
))