npm install react-look1.0 Release: As soon as the documentation is ready, Release Candidate 1 will be shipped. Be sure to try that out.
Look is a modular, processor-based and feature-rich styling library for React.js and React Native (starting with Version 0.4) based on inline styles. It simplyfies how you are styling your Components and comes with two different packages.
Be sure to read my blog post React Component styling without limitations which gives detail information how and why I build Look.
Look is as far as I know the feature richest inline-styling library for React.
Supporting 25 pseudo classes out of the box as well as stateful styles.
- ES6 Classes,
React.createClass& Stateless Components - pseudo classes
- stateful styles (condition based)
- nesting
- processors
- mixins
- extending
- !important-notation
- modular & themeable
- useful APIs
The react-look/dom package also adds additional DOM-specific mixins as well as a vendor-prefixing processor.
Using inline styles instead of static CSS files has a lot of positive side-effects. The most important one is dynamic behavior.
Remember you're using JavaScript now. Your styles no longer belong to a static file but are just a plain javascript object which can be manipulated to fit your very own needs.
- Component-scoped:
As JSX brings your View-structure to javascript, Look adds your styling (CSS) as well.
It encourages you to define your styles scoped to your Component which helps to improve your app structure and keeps together all Component-relevant data. One file less to create. - Separation of Concerns:
Look tries to keep your styling separated from your logic as much as possible while other styling libraries often encourage style validations such as
this.state.checked && styles.checkedwithin yourrender()-method.
The syntax is quite similar to Sass and other React styling libraries. Use nested objects to define pseudo classes, media queries or conditioned styles.
The example uses an ES7 Decorator @Look.
Alternatively wrap your Component with Look. e.g. Header = Look(Header)
import React, {Component, PropTypes} from 'react'
import Look from 'react-look/dom'
@Look
class Header extends Component {
static defaultProps = {clicks: 24}
static propTypes = {clicks: PropTypes.number.isRequired}
state = {status: 'active'}
styles = {
header : {
transition: '200ms all linear',
// Use media queries, pseudo classes and stateful styles
// using nested style objects. Those get evaluated
// on the fly and can be nested endlessly.
'@media (min-height: 800px)' : {
fontSize: 13,
':hover' : {
fontSize: 15,
}
},
'status=active' : {
backgroundColor: 'green',
'clicks>=20' : {
backgroundColor: 'pink'
}
}
},
title : {
fontWeight: 800,
fontSize: 20
}
}
render() {
return (
// Apply your styles with the `look` property.
// If you are only using single looks you may just drop the
// selector and just use a plain `look` property.
<header look="header">
<h1 look="title">
{this.props.title}
</h1>
</header>
)
}
}With Look you can easily style even Stateless Components which have been introduced with React 0.14. (Currently Look creates a Stateful Component for instant support)
let Header = ({title}) => (
<div look="box">
<div look="title">
{title}
</div>
</div>
)
let styles = {
box : {
backgroundColor: 'red',
padding: 10
},
title : {
fontSize: 20
}
}
export default Look(Header, styles)Look also supports React Native to use stateful conditions or pseudo classes such as :first-child.
Already got a lot of styles? Just add them to the wrapper and reference the 'selector' as a look.
class Test extends React.Component {
render(){
return <div look="box"></div>
}
}
let styles = StyleSheet.create({
box : {
color: 'red'
}
})
module.exports = Look(Component, styles)As React native does not support every ES6 Feature it could be quite a mess to get it running properly though. e.g. You need to require it using:
var Look = require('react-look').default;Usage will be improved soon!
Look provides a nice interface to use custom processors. By default is ships with a Mixin processor which let's you define custom mixins. Every implemented pseudo class, media queries and even stateful conditions are also just plain mixins. There is also an autoprefixing processor for the DOM-package to add browser-specific vendor prefixes based on inline-style-prefixer evaluating caniuse.com data.
Note: Furhter documentation on how to create your own processors & mixins will be served as soon as 1.0 hits the ground. For now I'd like you to check out
src/mixins/for some examples.
Check out the examples for more specific examples for some special use cases. See them in action using the demo.
You can visit the live-demo or easily run the examples on your own within the provided demo by just:
git clone --bare https://github.com/rofrischmann/react-look.git
npm install
npm run demoPlease keep in mind that this is done in my leisure time and that I cannot update the docs every commit.
I tried to write as much helpful documentation as possible. Before asking any question or creating an issue please be sure to read all the documentation.
The documentation gives huge information on how to do all kind of stuff. It serves detailed information on how to use processors, mixins and how to write your own.
Similar to Radium, Look wraps the render function and modifies applied styles while iterating recursive over all children.
Check Under the hood for more detailed information.
Unsupported pseudo classes?
Less boilerplate / shortcuts?
Additional styles & Processors?
Server-side rendering?
Read through the FAQ to get all those things done within seconds!
Look is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.
I would love to see people getting involved.
If you have a feature request please create an issue. Also if you're even improving Look by any kind please don't be shy and send a pull request to let everyone benefit.
If you are creating a pull request, try to use commit messages that are self-explanatory. Also always add some tests unless it's totally senseless (add a reason why it's senseless) and test your code before you commit so Travis won't throw errors.