Table of Contents

• Install
• Getting Started
• Usage
• API

Install

npm install react-classy

Getting Started

Classy makes styling React components composable, extensible, and simple. Implementation requires only 3 steps:

0. Import react-classy into your React component module
1. Decorate your React component class with @Classy.
2. Assign a CSS string to a static style prop 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.