Upgraded Stylesheet HoC

Stylesheet component now accepts functions of props and browser state

Added modular build

As of 4.2, this package now ships with a lib dir containing the babel compiled source as well as src with the raw es2027

v4.1.0

The initial media type can be set with the initialMediaType argument to the reducer factory.

v4.0.0

This version introduced a number of changes into the codebase resulting in a much more performant experience for the general user as well as adding increased support for adapting the responsive state to fit your particular use case.

StoreEnhancer

• calculateStateInitially is now calculateInitialState
• performanceMode is now default (no more throttled handler or associated options)

Reducer / Responsive State

• no more height/width (see README for instructions on migration forward)
• Added is field to responsiveState (browser.is.small <=> browser.mediaType === "small")
• ReducerFactory now accepts options as second argument (after breakpoints)
• infinityType argument is now the infinity field of the argument
• user-defined fields can be added to the responsive state with the extraFields option which is defined as a function that takes the current responsive state and returns the new fields to add (is spread over old state so user could also overwrite values if they wanted)

Added support for non-react environments

The following API breaking changes came with this version:

• React specific addons are importable from redux-responsive/react

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

Added proper support for universal applications

This release brought support for isomorphic rendering as well as a few API breaking changes. For more information, see the changelog.