es6-react-mixins
es6-react-mixins
is a module that lets you augment your ES6 React component classes with any number of custom ES6 mixins. You can also use it to merge traditional pre-ES6 React mixin objects into your ES6 React classes.
Inspired by this gist by Sebastian Markbåge the strategy is transient class hierarchies – instead of locking classes into permanent is a roles, class realtionships are assembled and re-assembled at will.
ES6 mixins are functions that return classes. The base
parameter is used internally to construct the mixin chain. There's no need to extend React.component
, you get that for free.
const es6Mixin = { console; } { console; };
React components invoke mixins with a call to super
.
;; es6Mixin { super; } { super; return <div>hello/div>; } React;
The API works with any number of mixins. Obviously order matters with multiple mixins – each super
call works its way up the mixin hierarchy.
const mixin1 = { super; console; } { super; console; }; const mixin2 = { super; console; } { super; console; }; mixin1 mixin2 { super; } { super; return <div>hello/div>; }
Notice that any mixin can call super
, even though there may be no other mixins to hear it. Every mixin descends from a base mixin with no-op implementations of the react lifecycle methods.
es6-react-mixins
also accepts traditional plain object mixins (a la pre-ES6 React), adapting them to ES6 style mixins internally.
var reactMixin = { consolelog } { thisreactMixin_rendered = true; }; reactMixin { super; } { super; return <div>hello/div>; }
Installation
npm install es6-react-mixins
The source is written in es6 but there's an npm prebublish step which transpiles to es5 and dumps into lib
directory - which is the default import.
Testing
npm test
Contributions
Yes please!