react-look
Docs • Getting Started • Example
Also available for React Native
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 & selectors
- 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?
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
- 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
- API Reference
- 2.1. look
- 2.2. StyleSheet
- 2.3. LookRoot
- 2.4. StyleContainer
- Registry
- Guides
- 4.1. Upgrading Look
- 4.2. Configuring Look
- 4.3. Build your own: Mixin
- 4.4. Build your own: Plugin
- 4.5. Build your own: Prefixer
- 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.
static defaultProps = size: 24 ; static propTypes = size: PropTypesnumberisRequired ; state = status: 'active' ; { return // Styles are basically applied using the `className` property <header className=stylesheader> <h1 className=stylestitle> thispropstitle </h1> </header> } // generates classNames for each selectorconst styles = StyleSheet Header
Finally you only need to wrap your application with LookRoot.
const App = <Header title="Hello World" />
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.gitcd react-looknpm 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.