### Table of Contents
Install
npm install react-classy
Getting Started
Classy makes styling React components composable, extensible, and simple. Implementation requires only 3 steps:
- Import
react-classyinto your React component module - Decorate your React component class with
@Classy. - Assign a CSS string to a static
styleprop on your React component class.
The styles defined on your React component will get automatically injected into the DOM right before your component mounts. Check out some examples of basic and advanced usage in the next section.
Usage
Basic
import React, { Component } from 'react';
// Import Classy
import Classy from 'react-classy';
// Decorate your component
@Classy
export default class Button extends Component {
// Add your CSS styles
static style = `
.button {
background: blue;
}
`
render() {
return (
<button className="button">
{this.props.children}
</button>
);
}
}Advanced
Classy is also highly customizable and supports asynchronous style rendering, custom middleware, and theming! In the next example, we'll demonstrate all of the aforementioned while creating a button that switches themes when clicked.
import React, { Component } from 'react';
// Import the decorator and utils modules
import Classy, { Utils } from 'react-classy';
// CSS pre-processor
import stylus from 'stylus';
@Classy({
// Makes Classy play nice with react-hot-loader :)
hot: true,
// Logs component css to console
debug: true,
// Will access specified prop to load component styles
// instead of default `style` prop
styleProp: 'stylus'
})
export default class ToggleButton extends Component {
render() {
return <button {...this.props} />;
}
static defaultProps = {
className: 'toggle-button toggle-button--default',
children: 'Touch Me!',
// Method that switches the component's theme.
// Will toggle from 'light' to 'dark' and vice versa.
onClick: function switchTheme(e) {
let { name } = ToggleButton;
let theme = Utils.getTheme(name);
theme = 'dark' === theme ? 'light' : 'dark';
Utils.setTheme(name, theme);
}
}
// Let's define our themes as a static.
// This makes it easy for others to modify a component's theme(s)
// via class extension.
static theme = {
light: {
textColor: '#a24bcf',
background: 'transparent',
borderRadius: '30px'
},
dark: {
textColor: '#fff',
background: '#4b79cf',
borderRadius: '4px'
}
}
// Instead of a hard-coding your CSS,
// you can assign a method that returns Promise that fulfills a CSS string.
// Our default theme is set via rest param.
static stylus(theme=ToggleButton.theme.light) {
let styl = `
.toggle-button
&--default
color: convert($theme.textColor)
background: convert($theme.background)
border: 1px solid convert($theme.textColor)
border-radius: convert($theme.borderRadius)
outline: none
padding: 20px
font-size: 18px
font-family: 'Helvetica Neue', helvetica, sans-serif
transition: transform .3s ease
&:hover
cursor: pointer
&:focus
transform: translateY(4px)
`;
// Finally, let's use our Stylus middleware to render actual CSS
// and return it with a Promise
return new Promise((yep, nope) => stylus(styl.trim())
.define('$theme', theme, true)
.render((err, css) => err ? nope(err) : yep(css))
);
}
}Decorator options and utility methods are comprehensively documented in the next section.
API
Decorator
@Classy([options])
A class decorator will automatically inject styles into the DOM before your ReactComponent instance mounts.
Example:
// ES2016
@Classy
export default class MyComponent extends React.Component { ... }
// ES2015
class MyComponent extends React.Component { ... }
export default Classy(MyComponent);
// ES5
var MyComponent = React.createClass({ ... });
module.exports = Classy(MyComponent);options
Type: Object
Default: see below
An object that allows you to customize your Classy component settings. All settings are optional. See defaults below.
options.debug
Type: Boolean
Default: false
Logs rendered cssText to debug console whens component styles are updated
options.hot
Type: Boolean
Default: false
Applies two effects:
- Replaces internal ref to the component if it gets hot-loaded
- Component never uses cached cssText
options.styleProp
Type: String
Default: style
Component prop to access for getting styles
options.themeProp
Type: String
Default: themes
Component prop to access for getting themes
options.alias
Type: String
Default: <ReactComponent>.name
Key under which Classy identifies your component.
If not specified, your ReactComponent's constructor.name will be used.
options.elemId
Type: String
Default: alias + '_' + Utils.genHash()
Example: MyButton_fxhhf
ID prop for component <style> tag. Uses options.alias plus a 5 character hash (separated by an underscore) to prevent unintentional id attribute collisions.
options.elemProps
Type: String
Default: { type: 'text/css' }
Other props to apply to component <style> tag
options.appendTo
Type: String
Default: head
Element to append component <style> tag to
Utils
#setTheme(alias [, theme, force=false])
Updates component styles with specified theme object
alias
Type: String
Key under which Classy identifies your component. (See decorator options)
theme
Type: String
Component theme to use
force
Type: Boolean
Default: false
Re-render theme if already applied
#getTheme(alias)
Return: Object
Gets the current theme applied to a component
(Convenience method for State.getComponentState(...).currentTheme).
alias
Type: String
Key under which Classy identifies your component. (See decorator options)
#updateStyle(alias)
Return: Promise
Creates a component's <style> tag and/or updates its cssText.
alias
Type: String
Key under which Classy identifies your component. (See decorator options)
#removeStyle(alias)
Return: Promise
Removes a component's <style> tag.
alias
Type: String
Key under which Classy identifies your component. (See decorator options)
#getComponentState(alias)
Return: Object
Gets a component's Classy state object.
alias
Type: String
Key under which Classy identifies your component. (See decorator options)