sly-js
v1.0.0
Published
A very simple library to work with inline styles in ReactJs
Downloads
6
Readme
SlyJS
A very simple library to work with inline styles in ReactJS.
Example
Use SlyJS is a very simple task. Let's say you have the given directory:
.
+-- index.jsx
+-- component
| +-- component.style.js
| +-- index.jsx
So your component.style.js file would have something like that:
var Sly = require('sly-js');
module.exports = Sly({
root: {
margin: 0
},
button: {
border: '1px solid grey'
},
red: {
backgroundColor: 'red'
}
});
and we're ready to use our styles! In your component file you can call the styles and pass as many keys as you want!
In the example above, we'd call the styles like that:
var s = require('./component.style');
var React = require('react');
React.createClass({
render: function(){
return <div>
<button style={s('button', 'red')}>The Button</button>
</div>;
}
});
Now the button inside your component will have a grey border and a red background color :)
Working with children styles
Let's say you want to namespace your styles. With SlyJS you can! A style like that:
var Sly = require('sly-js');
module.exports = Sly({
root: {
margin: 0
},
button: {
root: {
border: '1px solid grey'
},
whiteText: {
color: 'white'
}
},
red: {
backgroundColor: 'red'
}
});
Could be easily used like that:
var s = require('./component.style');
var React = require('react');
React.createClass({
render: function(){
return <div style={s('root')}>
<button style={s('button.root', 'button.whiteText', 'red')}>The Button</button>
</div>;
};
})
##Conditional styles
Let's say you want styles to be added only if some condition is true. SlyJS allow you to do it like that:
var s = require('./component.style');
var React = require('react');
React.createClass({
getInitialState: function(){
return { hovered: false };
},
render: function(){
return <div style={s('root')}>
<button
style={s('button.root', {'button.whiteText': this.state.hovered})}
onMouseOver={() => this.setState({ hovered: true })}
onMouseOut={() => this.setState({ hovered: false })}>
The Button
</button>
</div>;
};
})
In the example above, the style called button.whiteText
will be only rendered when the button is hovered.
Awesome, right?