A collection of react decorators to enhance components capabilities.
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.
Everything is pretty much under construction.
The package is currently available only on npm.
npm install --save react-decorators
Using the @classNames
decorator is equivalent to wrapping all className
attributes with the classNames
method.
@classNames
class MyComponent extends React.Component {
render() {
return (
<div className="simple-string">
<span className= />
<span className={['my-class', this.props.className, {nested: true}]} />
</div>
);
}
}
Using the @cssModules
decorator is equivalent to wrapping all className
attributes with the classNames.bind
method.
import styles from './styles.css';
@cssModules(styles)
class MyComponent extends React.Component {
render() {
return (
<div className="simple-string">
<span className= />
<span className={['my-class', this.props.className, {nested: true}]} />
</div>
);
}
}
Using the @injectContext
decorator wraps your components with multiple consumers and maps their values to the base component’s props
.
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>
);
}
}