Look is a modular, plugin-based and feature-rich styling library for React and React Native.
Platform differences are flagged using either or . If not flagged, it is available for both.

Warning: The documentation references the 1.0.0-beta. For legacy docs check here.

Features

• ES2015 Classes & React.createClass
• stateless Components
• server-side rendering
• plugin-based
• developer tools
• Sass-like nesting
• pseudo classes
• media queries
• platform queries
• conditioned styles
• stateful values & selectors
• fallback values
• extending
• vendor prefixing
• CSS, font-face & keyframes API

Documentation

The documentation contains information on every part of Look including usage guides and API reference.

New to Look?
Make sure to check out the the relevant Getting Started guide which provides a full guide on how to use Look. From installation, over configuration and up to even developer tooling.

Getting Started - React
Getting Started - React Native

Example Component

This is only an example Component and won't run out of the box without wrapping your App. See the Getting Started guide on how to setup Look correctly.

The syntax is quite similar to Sass and other React styling libraries.

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

render() { return ( // Styles are basically applied using the className property

// generates classNames for each selector const styles = StyleSheet.create({ header: { transition: '200ms all linear', // Use media queries or pseudo classes // using nested style objects. Those get transformed // on the fly and can be nested endlessly. '@media (min-height: 800px)': { fontSize: 13, ':hover': { fontSize: 15 } }, // You can also use mixins with the same selector. // They'll get split intelligently and evaluated on render '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)

<br>
<img src="https://raw.githubusercontent.com/rofrischmann/react-look/develop/docs/https://raw.githubusercontent.com/rofrischmann/react-look/develop/docs/res/native-badge.png" height=25>
```sh
npm install react-look-native

Using with react-native only a part of the plugins, mixins and devTools is available. You also import some stuff differently.

import React, { View, Text, Component, PropTypes } from 'react-native'
import look, { StyleSheet } from 'react-look-native'

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

  render() {
    return (
      // Styles are basically applied using the `style` property
      // Same way as React Native does by default
      <View style={styles.header}>
        <Text style={styles.title}>
          {this.props.title}
        </Text>
      </View>
    )
  }
}

// generates objects for each selector
const styles = StyleSheet.create({
  header: {
    color: 'red',
    // You can also use mixins with the same selector.
    // They'll get split intelligently and evaluated on render
    '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)

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.

Right now I am working to get a running React Native example ready. Stay tuned.

License

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