react-mixin-decorator

Quickly create higher-order components out of mixins and/or create higher-order components that can easily double as mixins.

Table of contents

1. Installation
2. Why?
3. Usage
4. Example (mixin to decorator)
5. Example (both mixin and decorator)
6. Real world example
7. Disclaimer

Installation

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.

Why?

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 React.createClass.

Usage

import React from 'react';
import MixinDecorator from 'react-mixin-decorator';
import SomeMixin from 'some-mixin';

const defaultProps = { ... };
const autoBind = [ ... ];
const SomeDecorator = MixinDecorator(
  'SomeDecorator',  // displayName
  SomeMixin,
  defaultProps,     // optional
  autoBind          // optional
);

@SomeDecorator
export default class Example extends React.Component {
  // etc.
}

The generated decorator's props and state are passed to the decorated component's props.

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 this.props.someMixinMethod.

You may also provide an array of methods that you know need to be auto-bound.

Example (mixin to decorator)

See example.js and some-mixin.js.

Example (both mixin and decorator)

See example-two.js and both-decorator-and-mixin.js.

Real world example

See use-tooltip for a decorator that adds a tooltip to React components.

Disclaimer

Not every mixin can be converted to a higher-order component with this.