Welcome to baobab's React integration (from v2.0.0 and onwards).
Implemented patterns:
You can install baobab-react
through npm:
npm install baobab-react
Peer dependencies
This library necessitate that you install baobab >= 2.0.0
and react >= 0.13.x
(plus react-dom >= 0.14.x
if required).
Then require the desired pattern and only this one will be loaded (meaning that your browserify/webpack bundle, for instance, won't load unnecessary files and end up bloated).
Example
var mixins = require('baobab-react/mixins');
In order to keep component definitions detached from any particular instance of Baobab, the mixins, higher order components etc. are divided into two:
This is necessary so that isomorphism can remain an enjoyable stroll in the park (your UI would remain a pure function).
Controlled input state
If you need to store a react controlled input's state into a baobab tree, remember you have to commit changes synchronously through the tree.commit
method or else you'll observe nasty cursor jumps in some cases.
var PropTypes = require('baobab-react/prop-types').PropTypes;
var Input = React.createClass({
mixins: [mixins.branch],
cursors: {
inputValue: ['inputValue']
},
contextTypes: {
tree: PropTypes.baobab
},
onChange: function(e) {
var newValue = e.target.value;
// If one edits the tree normally, i.e. asynchronously, the cursor will hop
this.cursor.set(newValue);
// One has to commit synchronously the update for the input to work correctly
this.cursor.set(newValue);
this.context.tree.commit();
},
render: function() {
return <input onChange={this.onChange} value={this.state.inputValue} />;
}
});
Contributions are obviously welcome.
Be sure to add unit tests if relevant and pass them all before submitting your pull request.
# Installing the dev environment
git clone git@github.com:Yomguithereal/baobab-react.git
cd baobab-react
npm install
# Running the tests
npm test
# Linting
npm run lint
# Building a independent version
npm run build
# or per pattern
npm run build-mixins
npm run build-higher-order
npm run build-hooks
MIT