Nonlinear Performance Magnification

    react-look

    1.0.1 • Public • Published

    react-look

    npm version npm downloads react version gzipped size

    DocsGetting StartedExample
    Also available for React Native

    Features

    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.

    Table of contents

    1. Getting Started
    2. API Reference
    3. Registry
    4. Guides
    5. FAQ

    Example

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

    npm install react-look --save

    Look ships pseudo class and media query support by default. They're resolved within the StyleSheet.create method.

    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
          <header className={styles.header}>
            <h1 className={styles.title}>
              {this.props.title}
            </h1>
          </header>
        )
      }
    }
     
    // 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)

    Finally you only need to wrap your application with LookRoot.

    import { LookRoot, Presets } from 'react-look'
    import { render } from 'react-dom'
    import React, { Component } from 'react'
    import Header from './Header'
     
    const App = () => <Header title="Hello World" />
     
    render(
      <LookRoot config={Presets['react-dom']}>
        <App />
      </LookRoot>,
      document.getElementById('app')
    )

    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
    cd react-look
    npm install
    # run this to actually prepare the modules 
    npm run build
    # run this as a client-side only demo 
    npm run demo
    # run this as a universal demo 
    npm run demo:universal

    License

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

    Install

    npm i react-look

    DownloadsWeekly Downloads

    56

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • rofrischmann