A collection of react decorators to enhance components capabilities
npm install 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.
The package is currently available only on npm.
``shell`
npm install --save react-decorators
Everything is pretty much under construction
- classNames
- cssModules
- injectContext
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.
`javascript
@classNames
class MyComponent extends React.Component {
render() {
return (
}
`
What is does
An extension of the classNames decorator, it binds the
classnames package to React's className property using the bind
alternate version
for css-modules.
`
import styles from './styles.css';
@cssModules(styles)
class MyComponent extends React.Component {
render() {
return (
}
`
Although it mixing between ES2015+ imports and CommonJS require,
I find this syntax to be very readable.
`js`
@cssModules(require('./my-component.scss'))
class MyComponent extends React.Component { ... }
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[, ...]})
`js
@injectContext({
theme: ThemeConsumer,
})
class MyComponent extends React.Component {
render() {
return (
}
``