react-style-manager
v0.2.0
Published
A react package to more easily manage the stateful styling of your components.
Downloads
2
Maintainers
Readme
react-style-manager
A react package to more easily manage the stateful styling of your components.
Getting started
Run
npm install react-style-manager --save
to install the package.Call the
StyleManager
composite function, passing through your component.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);