react-in-style
v0.21.0
Published
Style react components by generating a style tag for all react components
Downloads
26
Maintainers
ericwooleyReadme
This is in beta, and has not yet reached a stable realease
The API may be changed at any point until 1.0 is reached
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.
react-in-style
Style react components by generating a style tag for all react components in a sass-like fassion.
Motivation
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.
Breaking changes
as of 0.21.0 Auto prefixer was removed, because it was causing issues and inflated library size.
Installing
npm install --save react-in-style
Example Usage
// 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>API
- 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)
Running the unit tests
open 'test/runner.html' && gulp test:browser (may need to refresh once after it loads.)
Contributing
Pull -> branch -> pull request
Try to match the style (tabs/spaces etc) if not I will fix it.