mixin-decorator

Mixin Decorator

This is a simple decorator function for mixing in behaviors from other sources. It can be called multiple times or passed multiple behaviors. It is useful for React components because it allows multiple definitions of the same method for methods that return undefined. So you can have mixins that tap into the component lifecycle without breaking each other.

Installation

npm install -S mixin-decorator

Examples

// behaviors/hello.js
const hello = {
  hello(){
    console.log("hello world")
  }
}

export default hello

import mixin from "mixin-decorator"
import hello from "./behaviors/hello.js"

@mixin(hello)
class Hello{
}

var obj = new Hello()
obj.hello() //output: hello world

Using mixin-decorator with React Components

mixin-decorator let's multiple mixins declare the same method. This is great for letting mixin's tap into React's lifecycle.

import React from "react"
import mixin from "mixin-decorator"

const behavior1 ={
  componentDidMount(){
    console.log("behavior1 tapped into componentDidMount")
  }
}

const behavior2 ={
  componentDidMount(){
    console.log("so did behavior2")
  }
}

@mixin(behavior1, behavior2)
class MyComponent extends React.Component {
  componentDidMount(){
    console.log("i'm a component")
  }

  render(){
    return <div>Hello</div>
  }
}

When MyComponent is mounted the console would have 3 logs:

i'm a component
behavior1 tapped into componentDidMount
so did behavior2

Documentation

@mixin(...behaviors)

It accepts one or more objects full of behaviors to mix in. If your mixins have definitions of the same method and you care about the order they are called in, use this style as they will be called in the order specified.

@mixin(helloWorld, edit)
class Hello {

It can also be stacked. If your mixins declare the same method be aware that they will be called in reverse order when using this style. This is because it is equivalent to this mixin(edit)(Hello); mixin(helloWorld)(Hello)

@mixin(helloWorld)
@mixin(edit)
class Hello {