baobab-react
Welcome to baobab's React integration (from v2.0.0 and onwards).
Implemented patterns:
- Hooks
- Higher order components (curried so also usable as ES7 decorators)
- Mixins
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 = ;
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
Higher Order Components
Mixins
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 = PropTypes; var Input = React;
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 git@github.com:Yomguithereal/baobab-react.gitcd baobab-reactnpm install # Running the tests npm test # Linting npm run lint # Building a independent version npm run build # or per pattern npm run build-mixinsnpm run build-higher-ordernpm run build-hooks
License
MIT