react-decorators

React-decorators

A collection of react decorators to enhance components capabilities.

Feel free to open a PR with your own decorators.
For large new features, please open an issue first.

Installation

The package is currently available only on npm.

npm install --save react-decorators

Decorators

The documentation is under construction

• classNames
• cssModules
• injectContext

classNames

What is does

Injects the classnames package directly into React's className property.

A simple JavaScript utility for conditionally joining classNames together.
...
The classNames function takes any number of arguments which can be a string or object.
...
If the value associated with a given key is falsy, that key won't be included in the output.

@classNames
class MyComponent extends React.Component {

    render() {
        return (
            <div className="classnames-examples">
                <span className={['foo', 'bar']} /> {/* class="foo bar" */}
                <span className={{selected: false, visible: true}} /> {/* class="visible" */}
                <span className={[null, {active: true}, false, [{nested: true}]]} /> {/* class="active nested" */}
                <span className={{hasClass: false}} /> {/* class="" */}
            </div>
        );
    }

}

cssModules

What is does

An extension of the classNames decorator, it binds the classnames package to React's className property using the alternate bind version for css-modules.

import styles from './styles.css';

@cssModules(styles)
class MyComponent extends React.Component {

    render() {
        return (
            <div className="my-class">
                // Content goes here
            </div>
        );
    }

}

Although it mixing between ES2015+ imports and CommonJS require, I find this syntax to be very readable.

@cssModules(require('./my-component.scss'))
class MyComponent extends React.Component { ... }

injectContext

The @injectContext decorator wraps your component with multiple consumers and maps their values to the base component's props.

Usage:

@injectContext({ propName: Consumer, ... })
class BaseComponent extends React.Component { ... }

Parameters:

• consumersMap - an Object mapping property names to context consumers

Examples:

const ThemeContext = React.createContext('default');
const DepthContext = React.createContext(0);

// ...

@injectContext({
    theme: ThemeContext.Consumer,
    depth: DepthContext.Consumer,
})
class MyComponent extends React.Component {

    render() {
        return (
            <div>
                <p>Active Theme: {this.props.theme}</p>
                <p>Current Depth: {this.props.depth}</p>
            </div>
        );
    }

}