Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/angus-c/es6-react-mixins
universal mixin adapter for react
https://github.com/angus-c/es6-react-mixins
Last synced: 3 days ago
JSON representation
universal mixin adapter for react
- Host: GitHub
- URL: https://github.com/angus-c/es6-react-mixins
- Owner: angus-c
- License: mit
- Created: 2015-04-25T05:04:53.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-18T21:57:41.000Z (about 7 years ago)
- Last Synced: 2024-04-24T16:10:42.143Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 47.9 KB
- Stars: 150
- Watchers: 6
- Forks: 16
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# es6-react-mixins
[](http://travis-ci.org/angus-c/es6-react-mixins) [](https://npmjs.org/package/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](https://gist.github.com/sebmarkbage/fac0830dbb13ccbff596) by [Sebastian Markbåge](https://github.com/sebmarkbage) 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.
```js
const es6Mixin = base => class extends base {
componentWillMount() {
console.log("augmented componentWillMount");
}
render() {
console.log("augmented render");
}
};
```
React components invoke mixins with a call to `super`.
```js
import mixin from 'es6-react-mixins';
import React from 'react';
class MyComponent extends mixin(es6Mixin) {
componentWillMount() {
super.componentWillMount();
}
render() {
super.render();
return
hello/div>;
}
}
React.render(, document.body);
```
The API works with any number of mixins. Obviously order matters with multiple mixins – each `super` call works its way up the mixin hierarchy.
```js
const mixin1 = base => class extends base {
componentWillMount() {
super.componentWillMount();
console.log("mixin1 componentWillMount");
}
render() {
super.render();
console.log("mixin1 render");
}
};
const mixin2 = base => class extends base {
componentWillMount() {
super.componentWillMount();
console.log("mixin2 componentWillMount");
}
render() {
super.render();
console.log("mixin2 render");
}
};
class MyComponent extends mixin(mixin1, mixin2) {
componentWillMount() {
super.componentWillMount();
}
render() {
super.render();
return
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.
```js
var reactMixin = {
componentWillMount: function () {
console.log
},
render: function () {
this.reactMixin_rendered = true;
}
};
class MyComponent extends mixin(reactMixin) {
componentWillMount() {
super.componentWillMount();
}
render() {
super.render();
return
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!