alitaheri / react-look

Advanced & Dynamic Component Styling for React and React Native. Ships with powerful Plugins, Mixins and Developer Tools.

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. Make sure to test it. 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
• 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?
docs/ 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.

Table of contents

1. Registry
   • 1.1. Plugins
     • Fallback Value
     • Mixin
     • Prefixer
     • Stateful Value
     • 1.1.1 DevTools
       • Friendly ClassName
       • Linter
       • Style Logger
   • 1.2 Mixins
   • Before / After
   • Blank
   • Contains
   • Empty
   • Extend
   • Extract CSS
   • First Letter
   • Platform queries

• Stateful Conditions
• Substr

2. Guides
   • 2.1. Upgrading Look
   • 2.2. Configuring Look
   • 2.3. Build your own: Mixin
   • 2.4. Build your own: Plugin
3. FAQ
4. Under The Hood (incomplete)
   • 4.1. How does Look work?
   • 4.2. How does StyleSheet.create work?

1. Getting Started
   • 1.1. Installation
   • 1.2. First Component
   • 1.3. Stateless Components
   • 1.4. Pseudo classes
   • 1.5. Media queries
   • 1.6. Mixins & Plugins
   • 1.7. Fallback values
   • 1.8. Vendor prefixes
   • 1.9. Server-side rendering
   • 1.10. DevTools
2. API Reference
   • 2.1. look
   • 2.2. StyleSheet
     • create
     • combineStyles
     • toCSS
     • addCSS
     • keyframes
     • font
   • 2.3. LookRoot
   • 2.4. StyleContainer

1. Getting Started
   • 1.1. Installation
   • 1.2. First Component
   • 1.3. Stateless Components
   • 1.4. Mixins & Plugins
   • 1.5. DevTools
2. API Reference
   • 2.1. look
   • 2.2. StyleSheet
     • create
     • combineStyles
   • 2.3. LookRoot

Example

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

```sh npm install react-look ``` Using with `react-dom` Look ships **pseudo class** and **media query** support by default. They're resolved within the `StyleSheet.create` method. ```javascript 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 ( // Styles are basically applied using the className property

{this.props.title}

) } }

// 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.

```sh 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 ```

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.

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.