{"id":17807450,"url":"https://github.com/homebaseio/homebase-react","last_synced_at":"2025-04-07T19:13:18.465Z","repository":{"id":45322254,"uuid":"301863241","full_name":"homebaseio/homebase-react","owner":"homebaseio","description":"The React state management library for write-heavy applications","archived":false,"fork":false,"pushed_at":"2021-09-07T14:27:55.000Z","size":39797,"stargazers_count":202,"open_issues_count":1,"forks_count":10,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-31T18:19:22.616Z","etag":null,"topics":["clojure","clojurescript","database","datahike","datalog","datalog-database","datascript","graph-database","homebase","hook","immutable-store","javascript","react","react-hooks","relational-databases","state-management","typescript"],"latest_commit_sha":null,"homepage":"https://homebase.io/docs/homebase-react","language":"Clojure","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/homebaseio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-06T21:51:53.000Z","updated_at":"2024-05-31T07:43:00.000Z","dependencies_parsed_at":"2022-08-30T00:40:47.551Z","dependency_job_id":null,"html_url":"https://github.com/homebaseio/homebase-react","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/homebaseio%2Fhomebase-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/homebaseio%2Fhomebase-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/homebaseio%2Fhomebase-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/homebaseio%2Fhomebase-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/homebaseio","download_url":"https://codeload.github.com/homebaseio/homebase-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247713258,"owners_count":20983683,"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":["clojure","clojurescript","database","datahike","datalog","datalog-database","datascript","graph-database","homebase","hook","immutable-store","javascript","react","react-hooks","relational-databases","state-management","typescript"],"created_at":"2024-10-27T14:04:28.043Z","updated_at":"2025-04-07T19:13:17.902Z","avatar_url":"https://github.com/homebaseio.png","language":"Clojure","readme":"\u003cimg src=\"public/images/logo-blk.png\" height=\"50\" align=\"right\"\u003e\n\n# Homebase React\n\n[![CI](https://github.com/homebaseio/homebase-react/workflows/CI/badge.svg)](https://github.com/homebaseio/homebase-react/actions?query=workflow%3ACI)\n[![CD](https://github.com/homebaseio/homebase-react/workflows/CD/badge.svg)](https://github.com/homebaseio/homebase-react/actions?query=workflow%3ACD)\n[![License](https://img.shields.io/github/license/homebaseio/homebase-react.svg)](LICENSE)\n[![Twitter Follow](https://img.shields.io/twitter/follow/homebase__io?label=Follow\u0026style=social)](https://twitter.com/homebase__io)\n\n*The React state management library for write-heavy applications*\n\nSupported languages, frameworks and DBs:\n\n- JS + React + Datascript ([jump](#javascript--react))\n- CLJS + Reagent + Datascript ([jump](#clojurescript--reagent))\n- *Datahike support coming soon*\n\n## What and Why\n\nAs data and our need to annotate and organize it grows, so does our need for supporting state in *write-heavy* applications.\n\nTo solve this problem, modern write-heavy applications such as Superhuman, Roam Research, and Facebook Messenger built their own embedded data layers to enable these more sophisticated user experiences. \n\nHomebase-react enables developers to access the same embedded datalog database as Roam Research through React hooks. You no longer have to build out a team or learn specialized tools like Clojure in order to build a delightful write-heavy application.\n\n\n## Testimonials\n\u003e Homebase is executing on the vision of data usage, portability, and management we had when building Firebase. We never got there. I'm excited!\n\u003e\n\u003e —James Tamplin, Founder/CEO of Firebase\n\n\u003e Datalog is the future of end-user programming, personal productivity software, p2p software, etc.\n\u003e\n\u003e —Chet Corcos, Founding Engineer of Notion\n\n# Javascript + React\n\nStart by installing `homebase-react`.\n\n[![NPM Version](https://img.shields.io/npm/v/homebase-react)](https://www.npmjs.com/package/homebase-react)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/homebase-react)](https://www.npmjs.com/package/homebase-react)\n\n```bash\n# NPM\nnpm install homebase-react --save\n\n# Yarn\nyarn add homebase-react\n```\n\nOptionally install the `datalog-console` [chrome extension](https://chrome.google.com/webstore/detail/datalog-console/cfgbajnnabfanfdkhpdhndegpmepnlmb?hl=en) to inspect the `homebase-react` DB in your browser.\n\n⭐️ 📖 **[Read the JS docs](https://homebase.io/docs/homebase-react)** ⚛️ ⭐️\n\n```js\nimport { useCallback } from 'react'\nimport { HomebaseProvider, useEntity, useTransact } from 'homebase-react'\n\nconst RootComponent = () =\u003e (\n  // Create a DB and set some starting data\n  \u003cHomebaseProvider config={{ initialData: [{ counter: { id: 1, count: 0 }}] }}\u003e\n    \u003cApp/\u003e\n  \u003c/HomebaseProvider\u003e\n)\n\nconst App = () =\u003e {\n  // Get entity id = 1\n  const [counter] = useEntity(1)\n  const [transact] = useTransact()\n\n  return (\n    \u003cbutton onClick={() =\u003e {\n      // Increment and save the count\n      transact([{ counter: { \n        id: 1, count: counter.get('count') + 1 \n      }}])\n    }\u003e\n      {/* Render the count */}\n      Increment {counter.get('count')}\n    \u003c/button\u003e\n  )\n}\n```\n\n[Live demo](https://homebaseio.github.io/homebase-react/#!/homebase.dev.example.counter)\n\n# ClojureScript + Reagent\n\nStart by adding `homebase-react`.\n\n[![Clojars Project](https://img.shields.io/clojars/v/io.homebase/homebase-react.svg)](https://clojars.org/io.homebase/homebase-react)\n\nOptionally add `datalog-console` and its corresponding [chrome extension](https://chrome.google.com/webstore/detail/datalog-console/cfgbajnnabfanfdkhpdhndegpmepnlmb?hl=en) to inspect the DB in your browser.\n\n[![Clojars Project](https://img.shields.io/clojars/v/io.homebase/datalog-console.svg)](https://clojars.org/io.homebase/datalog-console)\n\n⭐️ 📖 **[Read the CLJS docs](https://cljdoc.org/d/io.homebase/homebase-react/CURRENT)** ƛ ⭐️\n\n```clojure\n(ns homebase.dev.example.reagent.counter\n  (:require\n   [datascript.core :as d]\n   [homebase.reagent :as hbr]\n   [datalog-console.integrations.datascript :as datalog-console]))\n\n(def db-conn (d/create-conn {}))\n(d/transact! db-conn [[:db/add 1 :count 0]]) ; Transact some starting data.\n(hbr/connect! db-conn) ; Connect homebase.reagent to the database.\n(datalog-console/enable! {:conn db-conn}) ; Also connect the datalog-console extension for better debugging.\n\n(defn counter []\n  (let [[entity] (hbr/entity db-conn 1)] ; Get a homebase.reagent/Entity. Note the use of db-conn and not @db-conn, this makes it reactive.\n    (fn []\n      [:div\n       \"Count: \" (:count @entity) ; Deref the entity just like a reagent/atom.\n       [:div\n        [:button {:on-click #(d/transact! db-conn [[:db/add 1 :count (inc (:count @entity))]])} ; Use d/transact! just like normal.\n         \"Increment\"]]])))\n```\n\n[Live demo](https://homebaseio.github.io/homebase-react/index.html#!/homebase.dev.example.reagent)\n\n## Roadmap\n\n1. ~~Improve developer tools: custom chrome formatters, DB admin console extension~~\n2. ~~Rewrite React ↔ Homebase cache~~\n    1. ~~Support async DB access (for Datahike)~~\n    2. ~~Reactive query planning (better perf on pages with lots of live reads)~~\n3. Swap [Datascript](https://github.com/tonsky/datascript) out for [Datahike](https://github.com/replikativ/datahike)\n    1. Immutability\n    2. History / Change Tracking\n4. Persist to IndexedDB\n5. [Local-first](https://www.inkandswitch.com/local-first.html) conflict resolution for offline caching and sync between multiple devices\n\n## Limitations\n\nHomebase React is currently not a good choice for read-heavy applications (e.g. Twitter, ecommerce). We plan to support these query patterns with our [platform](http://homebase.io) eventually.\n\n## Alternatives\n\nThere isn't much in the way of React friendly datalog DB based state management for Javascript, but there's at least one alternative if you're a Clojure dev.\n\n- If you prefer `d/pull` over `d/entity` take a look at [Posh](https://github.com/denistakeda/posh). It supports less of the `d/q` API, but provides more tools for tuning performance.\n\n## Development\n\n```bash\nyarn install\nyarn dev\n```\n\nOpen http://localhost:3000\n\n## Test\n\n```bash\nyarn install\nyarn test\n```\n\n## Contributing\n\nWelcome and thank you! Writing docs, patches and features are all incredibly helpful and appreciated.\n\nWe only ask that you provide test coverage for code changes, and conform to our [commit guidelines](CONTRIBUTING.md).\n\n## Authors\n\n- Chris Smothers ([@csmothers](https://twitter.com/csmothers)) – [Homebase](https://www.homebase.io/)\n- JB Rubinovitz ([@rubinovitz](https://twitter.com/rubinovitz)) – [Homebase](https://www.homebase.io/)\n","funding_links":[],"categories":["Clojure"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhomebaseio%2Fhomebase-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhomebaseio%2Fhomebase-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhomebaseio%2Fhomebase-react/lists"}