baobab-react alternatives and similar libraries
Based on the "Data Store" category.
Alternatively, view baobab-react alternatives based on common mentions on social networks and blogs.
-
-
-
-
reflux
A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux -
-
-
-
-
redux-batched-actions
redux higher order reducer + action to reduce actions under a single subscriber notification -
-
-
redux-batched-subscribe
store enhancer for https://github.com/reactjs/redux which allows batching subscribe notifications. -
-
fluorine-lib
DISCONTINUED. Reactive state and side effect management for React using a single stream of actions. -
fireproof
Realtime database, runs anywhere. Install Fireproof in your front-end app or edge function, and sync data via any backend. -
react-redux-provide
DISCONTINUED. Bridges the gap between Redux and the declarative nature of GraphQL/Relay. Share, manipulate, and replicate application state across any number of components. -
synergies
Create a performant distributed context state for React by composing reusable state logic.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
Do you think we are missing an alternative of baobab-react or a related project?
README
baobab-react
Welcome to baobab's React integration (from v2.0.0 and onwards).
Implemented patterns:
- [Hooks](docs/hooks.md)
- [Higher order components](docs/higher-order.md) (curried so also usable as ES7 decorators)
- [Mixins](docs/mixins.md)
Summary
Installation
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');
On root & branches
In order to keep component definitions detached from any particular instance of Baobab, the mixins, higher order components etc. are divided into two:
- The Root aims at passing a baobab tree through context so that child component (branches) may use it. Typically, your app's top-level component will probably be a root.
- The Branches, bound to cursors, get their data from the tree given by the root.
This is necessary so that isomorphism can remain an enjoyable stroll in the park (your UI would remain a pure function).
Patterns
Hooks
[Dedicated documentation](docs/hooks.md)
Higher Order Components
[Dedicated documentation](docs/higher-order.md)
Mixins
[Dedicated documentation](docs/mixins.md)
Common pitfalls
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} />;
}
});
Contribution
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 [email protected]: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
License
MIT
*Note that all licence references and agreements mentioned in the baobab-react README section above
are relevant to that project's source code only.