react-style-manager

A react package to more easily manage the stateful styling of your components.

Getting started

1. Run npm install react-style-manager --save to install the package.

2. Call the StyleManager composite function, passing through your component.

3. Register your styling rules in your components' constructor, defining the conditions and applicable styles for each rule.

An example of the implementation code for a given SimpleButton component:

    import StyleManager from 'react-style-manager';

    class SimpleButton extends React.Component{
        constructor(props) {
            super(props)

            const { styleManager } = this.props;

            styleManager
                .change('root')
                .when(this.isDisabled)
                .apply({
                    opacity: 0.8,
                    cursor: 'not-allowed',
                });

            styleManager
                .change('button')
                .when(this.isDisabled)
                .apply({
                    color: '#a7a7a7',
                })
                .when(this.isHovered)
                .apply({
                    boxShadow: '2px 4px 7px 0px rgba(167,167,167,1)',
                });
        }

        isDisabled() {
            return !!this.props.disabled;
        }

        isHovered() {
            return !!this.state.hovered;
        }

        render() {
            const { styleManager } = this.props.styleManager;
            const styles = styleManager.generate();

            <div style={styles.root}>
                <button style={styles.button}></button>
            </div>
        }
    }

    export default StyleManager(SimpleButton);