Mixer for ES6 React classes
I love ES6 classes, but when I started to use ES6 with React I was missing mixin ability.
I needed simple yet easy to apply and (mostly) compatible with old plain object mixins (as I had many mixins in my library) way of applying mixins, but with nice ES6 syntax.
I said "mostly" because React seals props
property in classes thus preventing it's mutation. And I really don't want to fight against that, it's cool.
See the Pen React ES6 classes with mixins by Piotr "Hitori" Bosak (@HitoriSensei) on CodePen.
npm install react-es6-classy-mixins
Mixins stay the same plain objects as of before ES6 class syntax, eg.
var MixinA = {
getInitialState: function () {
return {
mixinA: 1
}
}
}
var MixinB = {
getInitialState: function () {
return {
mixinB: false
}
},
activateMixinB: function() {
this.setState({mixinB: true})
},
deactivateMixinB: function() {
this.setState({mixinB: false})
},
componentDidMount: function(){
console.log("MixinB.componentDidMount()")
},
x: function(){
return 1
}
}
var MixinC = {
componentDidMount: function(){
console.log("MixinC.componentDidMount()")
},
x: function(){
return 2
}
}
var MixinD = {
componentDidMount: function(){
console.log("MixinD.componentDidMount()")
},
getInitialState: function () {
return {
mixinB: true
}
},
x: function(){
return 4
}
}
instead of
class YourComponent extends BaseClass{...}
write
import ReactComponentWithMixins from "react-es6-classy-mixins"
class YourComponent extends ReactComponentWithMixins(mixins..., BaseClass){...}
for example
import ReactComponentWithMixins from "react-es6-classy-mixins"
class YourComponent extends ReactComponentWithMixins(MixinC, MixinB, MixinA, React.Component){
componentDidMount(){
console.log("YourComponent.componentDidMount()")
super()
}
...
}
You have to call super()
if you want to execute mixin methods of the same name.
Mixins are executed from left to right.
If there are more than one mixin with method of the same name returning a value (like this.x()) , only leftmost value will be returned but ALL methods will be executed in left to right order!
import ReactComponentWithMixins from "react-es6-classy-mixins"
class WithMixins extends ReactComponentWithMixins(MixinC, MixinB, MixinA, React.Component){
componentDidMount(){
console.log("WithMixins.componentDidMount()")
super()
}
...
}
/* Order of execution (left to right): */
WithMixins.componentDidMount()
MixinC.componentDidMount()
MixinB.componentDidMount()
import ReactComponentWithMixins from "react-es6-classy-mixins"
class WithExtendAndMixins extends ReactComponentWithMixins(MixinD, MixinB, WithMixins){
componentDidMount(){
console.log("WithMixins.componentDidMount()")
super()
}
...
}
/* Order of execution (left to right): */
WithExtendAndMixins.componentDidMount()
MixinD.componentDidMount()
MixinB.componentDidMount()
WithMixins.componentDidMount()
MixinC.componentDidMount()
MixinB.componentDidMount()
note that MixinB.componentDidMount()
is executed twice