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

Usage

Everything is pretty much under construction

Decorators

• 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

What is does

This decorator receives a map of property names to context consumers, and injects these the consumers values as properties to the base component.

injectContext({propName: Consumer[, ...]})

@injectContext({
    theme: ThemeConsumer,
})
class MyComponent extends React.Component {

    render() {
        return (
            <div className={this.props.theme.container}>
                // Content goes here
            </div>
        );
    }

}