Look is a modular, processor-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.
- ES2015 Classes,
React.createClass& Stateless Components - 30 pseudo classes
- stateful styles (condition based)
- nesting
- plugins
- extending
- modular & themeable
- useful APIs
The react-look/dom package also adds additional DOM-specific custom properties as well as a vendor-prefixing plugin.
Using inline styles instead of static CSS files has a lot of positive side-effects. The most important one is dynamic behavior.
Remember you're using JavaScript now. Your styles no longer belong to a static file but are just a plain javascript object which can be manipulated to fit your very own needs.
- Component-scoped:
As JSX brings your View-structure to javascript, Look adds your styling (CSS) as well.
It encourages you to define your styles scoped to your Component which helps to improve your app structure and keeps together all Component-relevant data. One file less to create. - Separation of Concerns:
Look tries to keep your styling separated from your logic as much as possible while other styling libraries often encourage style validations such as
this.state.checked && styles.checkedwithin yourrender()-method.
npm install react-lookComing from version < 0.5? Check the upgrade guide.
The syntax is quite similar to Sass and other React styling libraries. Use nested objects to define pseudo classes, media queries or conditioned styles.
The example uses an ES7 Decorator. Alternatively wrap your Component with Look. e.g. Header = Look(Header)
import React, { Component, PropTypes } from 'react'
import Look, { StyleSheet } from 'react-look/dom'
@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 media queries, pseudo classes and stateful styles
// using nested style objects. Those get evaluated
// on the fly and can be nested endlessly.
'@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 or state values
fontSize: (props) => props.size
}
})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)
let Header = ({title}) => (
<header look={styles.header}>
<h1 look={styles.title}>
{title}
</h1>
</header>
)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 ES6 & ES7 feature out of the box and it could be quite a mess to get it running properly though.
If you're wondering which package you should use. This depends on your needs.
react-lookincludes everything available for both React and React Native.react-look/domadds a lot of DOM-only plugins and custom properties.react-look/coreis used if you want to use a custom configuration for Look.react-look/addonsincludes every plugin, custom properties and tools used to configure your custom Look instance.
Check out the provided examples for some special use cases. See them in action using the demo.
You can visit the live-demo or 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 demoThe 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.
Look is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.
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.
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.