Have ideas to improve npm?Join in the discussion! »

    react-classy

    0.4.10 • Public • Published

    Classy logo

    npm version npm downloads build status dependency status devdependency status


    ### Table of Contents

    Install

    npm install react-classy

    Getting Started

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

    1. Import react-classy into your React component module
    2. Decorate your React component class with @Classy.
    3. 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.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)

    Install

    npm i react-classy

    DownloadsWeekly Downloads

    3

    Version

    0.4.10

    License

    MIT

    Last publish

    Collaborators

    • avatar
    • avatar