Look

npm install react-look

Look is a feature-rich styling library for React.js based on inline-styles that adds support for lots of CSS features as well as stateful styles. It extends your inline styles and is fully customizable through processors since it is based on Dynamic Style Sheets.

It got inspired by Cristopher Chedeau (@vjeux)'s presentation CSS in JS as well as Radium and ReactCSS.

Features

Look is as far as I know the feature richest inline-styling library for React.
Supporting 27 pseudo classes as well as stateful styles which is an awesome shortcut if you need some styles depending on any valid condition mostly used with this.state or this.props.

• ES6-ready
• media queries
• pseudo classes
• stateful styles (condition based)
• nesting
• processors (Prefixer, Mixins, ...)
• modular & themeable
• useful APIs

Supported pseudo classes

Benefit

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 (All-in-one)

As JSX brings your HTML 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.

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.checked within your render()-method.

Warning: Avoid using stateful conditions with data-sensitive states as this would mix logic and styles.

Usage

import React from 'react';
import Look from 'react-look';
import {Processors} from 'dynamic-style-sheets';
let {Prefixer, Flexbox} = Processors;

function custom(value){
  return value * 2 + 10
}

class Header extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      status: 'active'
    }
  }

  look(){
    return {
      header : {
        padding: custom(5),               // use benefit of javascript
        transition: '200ms all linear',
        '@media (min-height: 800px)' : {  // media queries
          fontSize: 13,
          ':hover' : {                    // pseudo classes
            fontSize: 15,
            ':checked' : {                // can be nested
              color: 'red'
            }
          }
        },
        'status=active' : {               // stateful styles
          backgroundColor: 'green',
          'clicks>20' : {                 // nested conditions
            backgroundColor: 'pink'       
          }
        }
      },
      title : {
        fontWeight: 800
      }
    }
  }
  
  processors(){
    return [Flexbox, Prefixer]
  }
  
  render() {
    return (
      <header look="header">            //Just use the `look` prop to apply styles
        <h1 look="title">
          {this.props.title}
        </h1>
      </header>
    )
  }
}

export default Look(Header);            //Your styles get processed and resolved here

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 build
open demo/index.html

Documentation

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 or react-look-tools.
You will also find some information on how Look works at the core and what Dynamic Style Sheets is all about.

How does Look work?

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.

FAQ

Unsupported pseudo classes?
Additional styles & Processors?
Custom mixins?
Extend styles?
Server-side rendering?

Read through the FAQ to get all those things done within seconds!

#react-look-tools react-look-tools is a toolchain of useful helper and mixins. It adds support for extending, keyframes and a lot of css hacks that can't be achieved with pure javascript. It also provides an useful developer tool to improve DX (developer experience). Also check FAQ which spoils some tools as well.

License

Look (react-look) is licensed under the MIT License.
Created with ♥ by @rofrischmann.

Contributing

Got any issues or need a great feature that is not (yet) supported?
Feel free to create an issue/request and I will handle that as fast as possible.