### This is in beta, and has not yet reached a stable realease
This is probably as stable as it will ever be. From now on it will follow semver. So you may depend on this version safely if you want.
Unit tests work in IE9+ however, this library has not been battle tested, and probably isn't ready for production unless you want to live on the edge. If you do implement it somewhere, I will list it here as an example. PR or message me.
Style react components by generating a style tag for all react components in a sass-like fassion.
This project was started as an alternative to react style because of it's inabilty to reasonably handle css states. Instead we are reacting in style, allowing you to define how your component should look, and creating a style tag in the head of the page which defines your component, hover states and all.
as of 0.21.0 Auto prefixer was removed, because it was causing issues and inflated library size.
npm install --save react-in-style
// or include `dist/react-in-style.js`
var ReactInStyle = require('react-in-style');
var style = {
// & refers to parent selector, similar to SASS
'&.test': {
':hover': {
background: '#999'
}
},
height: '100px',
width: '100px',
display: 'block',
// Auto converted to kebab case.
backgroundColor: 'red',
img: {
height: '500px',
&.thumbnail: {
height: '50px'
}
}
':hover': {
'background-color': 'blue'
}
};
Pic = React.createClass({
style: style,
render: function() {
return (
React.createElement('CustomElement', {className:'test'},
React.createElement('img', {
src: 'http://i.imgur.com/dYJLWdn.jpg',
className:'thumbnail'
})
)
);
}
});
// The second argument is the selector for your element.
ReactInStyle.add(Pic, 'customelement', {
queries: ['min-width: 500px', 'max-width: 900px']
});
// You can also pass in an object directly instead of a class
// ReactInStyle.add(style, 'customelement', {
// queries: ['min-width: 500px', 'max-width: 900px']
// });
module.exports = Pic;The above would put a style tag in the head of the page.
<html>
<head>
...
<style id="react-in-style">
@media (min-width: 500px) and (max-width: 900px) {
customelement.test:hover {background: #999}
customelement {height: '100px';width: '100px';display: 'block';background-color: 'red'}
customelement img {height: '500px'}
customelement img.thumbnail {height: '50px'}
customelement:hover {background-color: 'blue'}
}
</style>
</head>
</html>- Methods
- add(class, selector, options)
- The class with the style object (attached via object.prototype.style)
- The selector for the style.
- options (with examples)
{ // suppress warnings, which occur when the selector is added twice. noWarnings: false, // default // Will wrap queiries: ['max-width: 900px', 'orientation: landscape' ... ] // example }
- destroy() : Destroys all styles and removes all data related to previous adds.
- add(class, selector, options)
open 'test/runner.html' && gulp test:browser (may need to refresh once after it loads.)
Pull -> branch -> pull request
Try to match the style (tabs/spaces etc) if not I will fix it.