react-look-native

react-look-native

Docs • Getting Started
Also available for React

Features

• ES2015 Classes & React.createClass
• stateless Components
• plugin-based
• developer tools
• Sass-like nesting
• conditioned styles
• stateful values & selectors
• extending

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 Getting Started guide which provides a full guide on how to use Look. From installation, over configuration and up to even developer tooling.

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
3. Registry

• 3.1. Plugins
  • Mixin
  • Stateful Value
  • Stateful Selector
  • 3.1.1 DevTools
    • Style Logger
• 3.2 Mixins
  • Before / After
  • Blank
  • Contains
  • Empty
  • Extend
  • First Letter
  • Stateful Conditions
  • Substr

4. Guides
   • 4.1. Upgrading Look
   • 4.2. Configuring Look
   • 4.3. Build your own: Mixin
   • 4.4. Build your own: Plugin
5. FAQ

Example

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

npm install react-look-native --save

import React, { Component, PropTypes } from 'react'
import { View, Text } 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)

Finally you only need to wrap your application with LookRoot.

import { Presets,  LookRoot } from 'react-look-native'
import React, { Component } from 'react'
import { AppRegistry }  from 'react-native'
import Header from './Header'

// A simple basic app just showing the Header with "Hello World"
const App = () => <Header title="Hello World" />

// We ust create another container to wrap our App
const Container = () => (
  <LookRoot config={Presets['react-native']}>
    <App />
  </LookRoot>
)

AppRegistry.registerComponent('native', () => Container)

Demo

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.