Awesome
material-flux-container
Provide Container
Component for material-flux.
Installation
npm install material-flux-container
Dependencies
- material-flux
- React
Usage
Container
has same API to Flux Utils.
Container.create(base: ReactClass): ReactClass
Create is used to transform a react class into a container that updates its state when relevant stores change.
The provided base class must have static methods getStores()
and calculateState()
.
Example
See example/
import React from 'react';
import {render} from "react-dom";
import Container from "material-flux-container";
import UserContext from './UserContext.js';
const context = new UserContext();
export default class App extends React.Component {
constructor(...args) {
super(...args);
this.userStore = context.userStore;
this.state = {
userData: this.userStore.getUserData()
};
}
// Container require #getStores
static getStores() {
return [context.userStore]
}
// Container require #calculateState
static calculateState(prevState) {
return {
userData: context.userStore.getUserData()
}
}
onClick(event) {
context.userAction.doSomething("clicked");
}
render() {
return (
<button onClick={this.onClick.bind(this)}>
userData: {this.state.userData}
</button>
);
}
}
// create container with `getStores` and `calculateState`
const container = Container.create(App);
render(
React.createElement(container),
document.getElementById("js-app")
);
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
License
MIT