{"id":13422390,"url":"https://github.com/Yomguithereal/baobab-react","last_synced_at":"2025-03-15T12:30:38.979Z","repository":{"id":52139516,"uuid":"33933715","full_name":"Yomguithereal/baobab-react","owner":"Yomguithereal","description":"React integration for Baobab.","archived":false,"fork":false,"pushed_at":"2021-05-06T22:52:13.000Z","size":425,"stargazers_count":309,"open_issues_count":30,"forks_count":38,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-10-12T01:42:39.566Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Yomguithereal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-14T13:35:44.000Z","updated_at":"2024-09-29T10:59:21.000Z","dependencies_parsed_at":"2022-08-23T21:51:24.361Z","dependency_job_id":null,"html_url":"https://github.com/Yomguithereal/baobab-react","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yomguithereal%2Fbaobab-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yomguithereal%2Fbaobab-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yomguithereal%2Fbaobab-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yomguithereal%2Fbaobab-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yomguithereal","download_url":"https://codeload.github.com/Yomguithereal/baobab-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243730938,"owners_count":20338742,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T23:00:43.600Z","updated_at":"2025-03-15T12:30:38.955Z","avatar_url":"https://github.com/Yomguithereal.png","language":"JavaScript","funding_links":[],"categories":["Code Design","Uncategorized","JavaScript"],"sub_categories":["Data Store","Uncategorized"],"readme":"[![Build Status](https://travis-ci.org/Yomguithereal/baobab-react.svg)](https://travis-ci.org/Yomguithereal/baobab-react)\n\n# baobab-react\n\nWelcome to [baobab](https://github.com/Yomguithereal/baobab)'s [React](https://facebook.github.io/react/) integration (from v2.0.0 and onwards).\n\nImplemented patterns:\n\n* [Hooks](docs/hooks.md)\n* [Higher order components](docs/higher-order.md) (curried so also usable as ES7 decorators)\n* [Mixins](docs/mixins.md)\n\n## Summary\n\n* [Installation](#installation)\n* [On root \u0026 branches](#on-root--branches)\n* [Patterns](#patterns)\n  * [Hooks](#hooks)\n  * [Mixins](#mixins)\n  * [Higher Order Components](#higher-order-components)\n* [Common pitfalls](#common-pitfalls)\n* [Contribution](#contribution)\n* [License](#license)\n\n## Installation\n\nYou can install `baobab-react` through npm:\n\n```\nnpm install baobab-react\n```\n\n*Peer dependencies*\n\nThis library necessitate that you install `baobab \u003e= 2.0.0` and `react \u003e= 0.13.x` (plus `react-dom \u003e= 0.14.x` if required).\n\nThen 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).\n\n*Example*\n\n```js\nvar mixins = require('baobab-react/mixins');\n```\n\n## On root \u0026 branches\n\nIn order to keep component definitions detached from any particular instance of Baobab, the mixins, higher order components etc. are divided into two:\n\n* 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.\n* The **Branches**, bound to cursors, get their data from the tree given by the root.\n\nThis is necessary so that isomorphism can remain an enjoyable stroll in the park (your UI would remain a pure function).\n\n## Patterns\n\n### Hooks\n\n[Dedicated documentation](docs/hooks.md)\n\n### Higher Order Components\n\n[Dedicated documentation](docs/higher-order.md)\n\n### Mixins\n\n[Dedicated documentation](docs/mixins.md)\n\n## Common pitfalls\n\n**Controlled input state**\n\nIf 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.\n\n```js\nvar PropTypes = require('baobab-react/prop-types').PropTypes;\n\nvar Input = React.createClass({\n  mixins: [mixins.branch],\n  cursors: {\n    inputValue: ['inputValue']\n  },\n  contextTypes: {\n    tree: PropTypes.baobab\n  },\n  onChange: function(e) {\n    var newValue = e.target.value;\n\n    // If one edits the tree normally, i.e. asynchronously, the cursor will hop\n    this.cursor.set(newValue);\n\n    // One has to commit synchronously the update for the input to work correctly\n    this.cursor.set(newValue);\n    this.context.tree.commit();\n  },\n  render: function() {\n    return \u003cinput onChange={this.onChange} value={this.state.inputValue} /\u003e;\n  }\n});\n```\n\n## Contribution\n\nContributions are obviously welcome.\n\nBe sure to add unit tests if relevant and pass them all before submitting your pull request.\n\n```bash\n# Installing the dev environment\ngit clone git@github.com:Yomguithereal/baobab-react.git\ncd baobab-react\nnpm install\n\n# Running the tests\nnpm test\n\n# Linting\nnpm run lint\n\n# Building a independent version\nnpm run build\n\n# or per pattern\nnpm run build-mixins\nnpm run build-higher-order\nnpm run build-hooks\n```\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FYomguithereal%2Fbaobab-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FYomguithereal%2Fbaobab-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FYomguithereal%2Fbaobab-react/lists"}