1.2.3 • Public • Published


    build status npm version npm downloads

    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


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


    import React from 'react';
    import MixinDecorator from 'react-mixin-decorator';
    import SomeMixin from 'some-mixin';
    const defaultProps = { ... };
    const autoBind = [ ... ];
    const SomeDecorator = MixinDecorator(
      'SomeDecorator',  // displayName
      defaultProps,     // optional
      autoBind          // optional
    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.


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


    npm i react-mixin-decorator

    DownloadsWeekly Downloads






    Last publish


    • timbur