style-r
v1.0.8
Published
CSS styling tool for React
Downloads
2
Readme
StyleR - Styler for React
npm install style-r
StyleR provides you yet another styling way in JS.
Use StyleR with React.
Features
- Style mixin
- States (eg.
:hover
) supported - Media queries supported
- Keyframes supported (using Radium util)
- Autoprefix (using Radium util)
Usage
Basic
Define style
var style = StyleR.define({
display: 'block',
marginTop: '30px',
fontSize: '1.2em'
});
Set className
to HTML element
render() {
return (
<p className={style.className()}>
Lorem ipsum
</p>
);
}
Using states
Define style
var style = StyleR.define({
opacity: 0,
transition: 'opacity .3s',
':hover': {
opacity: 1
}
});
Set className
to HTML element
render() {
return (
<p className={style.className()}>
Lorem ipsum
</p>
);
}
Using className
modifier
Define style
var style = StyleR.define({
display: 'block',
'.isHidden': {
display: 'none'
}
});
Set className
to HTML element
render() {
return (
<p className={style.className({isHidden: this.state.isHidden})}>
Lorem ipsum
</p>
);
}
Using media queries
Define style
var style = StyleR.define({
display: 'block',
'@media screen and (max-width:320px)': {
display: 'none'
}
});
Set className
to HTML element
render() {
return (
<p className={style.className()}>
Lorem ipsum
</p>
);
}
Also, you can generate media query
ES6 syntax
var devices = {
mobile: StyleR.mediaQuery({
type: 'screen',
maxWidth: '320px'
}),
desktop: StyleR.mediaQuery({
type: 'screen',
minWidth: '1050px'
})
}
var style = StyleR.define({
color: 'white',
[devices.mobile]: {
color: 'green'
},
[devices.desktop]: {
color: 'blue'
}
});
Nesting style
Define style
var style = StyleR.define({
color: 'white',
opacity: 0,
'.isFoo': {
color: 'red'
},
'.isBar': {
opacity: 1,
'.isFoo': {
color: 'yellow'
}
}
});
Set className
to HTML element
render() {
return (
<p className={style.className({isFoo: state.isFoo, isBar: state.isBar})}>
Lorem ipsum
</p>
);
}
Keyframes
Same usage as Radium.
var keyframes = StyleR.keyframes({
'0%': {width: '10%'},
'50%': {width: '50%'},
'100%': {width: '10%'}
});
var style = styleR.define({
animation: keyframes + ' 3s ease 0s infinite'
});