Look is a modular, plugin-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.
- ECMAScript 2015 (ES6) Classes &
React.createClass - stateless Components
- 15 pseudo classes
- stateful styles (condition based)
- nesting
- plugins
- extending
- modular & themeable
- State API
The react-look/dom package also adds additional DOM-specific mixins as well as a vendor-prefixing plugin.
- media queries
- platform queries
- 30 pseudo classes
- vendor prefixing
- pseudo to CSS polyfill
- font-face API
- keyframes API
- CSS API
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, extended or iterated 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.
Coming from version < 0.5? Check the upgrade guide.
npm install react-lookThe 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 which is not part of the ECMAScript specification by now (and perhaps will never be). Alternatively just wrap your Component 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 mixins such as media queries or pseudo classes
// using nested style objects. Those get evaluated
// on the fly and can be nested endlessly.
// You can even create your own mixin.
'@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, state or context values
fontSize: (props, state, context) => props.size * state.zoom
}
})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)
const Header = ({title}) => (
<header look={styles.header}>
<h1 look={styles.title}>
{title}
</h1>
</header>
)
const styles = StyleSheet.create(Header, {/* See above */})
export default Look(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 ECMAScript 2015 (ES6) & ECMAScript 2016 (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, mixin 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 (Caution: This is outdated right now) 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'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.
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.