Look is a modular, plugin-based and feature-rich styling library for React and React Native using inline styles. It simplyfies how you are styling your Components and comes in two different configurations by default.

Features

• ECMAScript 2015 Classes
• React.createClass
• stateless Components
• configurable
• server-side rendering
• plugins
• nesting
• 34 pseudo classes
• stateful styles (condition based)
• extending
• media queries
• platform queries
• vendor prefixing
• developer tools (styleLogger, linter)
• pseudo to CSS polyfill
• font-face API
• keyframes API
• CSS API
• State API

Supported pseudo classes

Usage

Upgrading from an older major update? Check out the upgrade guide.

npm install react-look

The syntax is quite similar to Sass and other React styling libraries. Use nested objects to define pseudo classes, media queries or conditioned styles.

import React, { Component, PropTypes } from 'react'
import Look, { StyleSheet } from 'react-look'

class Header extends Component {
  static defaultProps = {size: 24}
  static propTypes = {size: PropTypes.number.isRequired}
  state = {status: 'active'}

  render() {
    return (
      // Apply your styles with the `look` property.
      <header look={styles.header}>
        <h1 look={styles.title}>
          {this.props.title}
        </h1>
      </header>
    )
  }
}

// creates a Header-scoped StyleSheet
const styles = StyleSheet.create(Header, {
  header: {
    transition: '200ms all linear',
    // Use mixins such as media queries or pseudo classes
    // using nested style objects. Those get evaluated
    // on the fly and can be nested endlessly.
    // You can even create your own mixin.
    '@media (min-height: 800px)': {
      fontSize: 13,
      ':hover': {    
        fontSize: 15,
      }
    },
    'status=active': {             
      backgroundColor: 'green',
      'size>=20': {            
        backgroundColor: 'pink'       
      }
    }
  },
  title: {
    fontWeight: 800,
    // use functions to inject props, state or context values
    fontSize: (props, state, context) => props.size * state.zoom
  }
})

export default Look(Header)

Stateless Components

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)

const Header = ({title}) => (
  <header look={styles.header}>
    <h1 look={styles.title}>
      {title}
    </h1>
  </header>
)

const styles = StyleSheet.create(Header, {/* See above */})
export default Look(Header)

React Native

Look also supports React Native to use stateful conditions or pseudo classes such as :first-child.
As you are most likely using the StyleSheet.create provided by React Native. You might just swap that with Look's StyleSheet and add the scope parameter.

NOTE: React Native does not support every ECMAScript 2015 (ES6) & ECMAScript 2016 (ES7) feature out of the box and it could be quite a mess to get it running properly though.

Configuration

Look ships without any plugin or mixin configured. You need to configure them on your own or use one of the presets.
react-look/addons includes every plugin, mixin, devTool and preset used to configure Look.

import { Presets, DevTools } from 'react-look/addons'

const customConfig = Presets['react-dom']
customConfig.plugins.push(DevTools.styleLogger)

// By default you pass your configuration as
// lookConfig to your root Component
ReactDOM.render(<App lookConfig={customConfig} />, document.getElementById('app'))

Check out the detailed configuration guide.

Demo

Check out the provided examples for some special use cases. See them in action using the demo. You can 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 babel
# run this as a client-side only demo
npm run demo
# run this as a universal demo
npm run demo:universal

Documentation

The documentation gives huge information on how to do all kind of stuff. It also serves detailed information on how to use plugins, use full power of the build-in ones and even how to write your own.

• Usage Guides
• API
• Plugins
• Mixins
• FAQ

License

Look is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.

Contributing

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.

Issues

If you're having any issue please let me know as fast as possible to find a solution a hopefully fix the issue. Try to add as much information as possible such as your environment, exact case, the line of actions to reproduce the issue.

Pull Requests

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.