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
What is does
Injects the classnames package directly into React's className
property.
A simple JavaScript utility for conditionally joining classNames together.
...
TheclassNames
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.
@classNamesComponent { 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.
@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[, ...]})
@Component { return <div className=thispropsthemecontainer> // Content goes here </div> ; }