Quickly create higher-order components out of mixins and/or create higher-order components that can easily double as mixins.
Table of contents
- Example (mixin to decorator)
- Example (both mixin and decorator)
- Real world example
npm install react-mixin-decorator
You should also of course be using ES6/ES7. If by some chance you're reading this and aren't aware of
Babel, check it out.
Because as a good developer, you like to maximize code reuse. If you're creating React components using ES6 classes and you'd like to use existing mixins to add some nice functionality to your component, you probably don't want to take the time to convert the mixins to something that your ES6 React component class could use.
Or maybe you're creating a decorator and you want an extremely easy way to offer the same functionality to folks using
;;;const defaultProps = ... ;const autoBind = ... ;const SomeDecorator =;@SomeDecoratorComponent// etc.
The generated decorator's
state are passed to the decorated component's
If you want to pass any of the mixin's methods to the decorated component, pass them within the
defaultProps argument with the same key, and each method will be auto-bound to the higher-order component. The decorated component can then access the method via
You may also provide an array of methods that you know need to be auto-bound.
Example (mixin to decorator)
Example (both mixin and decorator)
Real world example
use-tooltip for a decorator that adds a tooltip to React components.
Not every mixin can be converted to a higher-order component with this.