{"id":19174403,"url":"https://github.com/hoppula/refire","last_synced_at":"2026-03-16T16:01:56.612Z","repository":{"id":57352099,"uuid":"53422795","full_name":"hoppula/refire","owner":"hoppula","description":"Declarative Firebase bindings for Redux and React","archived":false,"fork":false,"pushed_at":"2017-09-10T19:21:46.000Z","size":129,"stargazers_count":46,"open_issues_count":2,"forks_count":9,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-28T01:03:36.229Z","etag":null,"topics":["firebase","react","redux"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hoppula.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-08T15:25:34.000Z","updated_at":"2023-03-25T06:58:55.000Z","dependencies_parsed_at":"2022-09-18T06:56:11.135Z","dependency_job_id":null,"html_url":"https://github.com/hoppula/refire","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoppula%2Frefire","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoppula%2Frefire/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoppula%2Frefire/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoppula%2Frefire/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoppula","download_url":"https://codeload.github.com/hoppula/refire/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252931804,"owners_count":21827169,"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":["firebase","react","redux"],"created_at":"2024-11-09T10:17:39.956Z","updated_at":"2026-03-16T16:01:56.509Z","avatar_url":"https://github.com/hoppula.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Refire\n\n\u003e Declarative Firebase bindings for Redux\n\nRefire keeps your local [Redux](http://redux.js.org/) store in sync with selected [Firebase](https://www.firebase.com/) paths. You can declaratively bind Firebase paths as Strings, Objects or Arrays.\n\nYou can also specify queries based on Redux state (e.g. currently logged in user or route parameter) and Refire will automatically subscribe and unsubscribe your bindings when state changes.\n\nAll data mutation happens through [Firebase client's](https://www.firebase.com/docs/web/api/firebase) `references` and Refire automatically updates your local Redux state after any changes in Firebase.\n\n### React\nFor usage with [React](https://facebook.github.io/react/) there's [refire-react](https://github.com/hoppula/refire-react).\n\n[refire-react](https://github.com/hoppula/refire-react) provides useful higher order components for common user actions such as login, logout, oAuth, registration, password reset and writing to Firebase.\n\nIf you have no need for special higher order React components, you can also just use the provided `firebaseToProps` helper with [react-redux](https://github.com/reactjs/react-redux) to get automatic re-renders for your connected views on any change.\n\nThere's also [refire-app](https://github.com/hoppula/refire-app) which wraps Refire, Refire React, Redux, React Router and React Free Style with developer friendly API.\n\n## Usage documentation\n\n### syncFirebase({apiKey, projectId, store, bindings, onCancel, onAuth, pathParams, databaseURL, name})\n\nsyncFirebase needs bindings, a Redux store instance and a Firebase instance settings (apiKey \u0026 projectId).\n\n`apiKey` is needed for firebase client since 3.x, you can obtain it from [Firebase console](https://console.firebase.google.com), select your project and go to `Add Firebase to your web app`.\n\n`projectId` is the project's identifier, e.g. `projectId`.firebaseio.com\n\n`bindings` bindings define the sync options per firebase path. See the comments below in **Usage example** for more info.\n\n`store` is your Redux store instance, remember to include `firebaseReducer` in your Redux reducer function, see the **Usage example** below.\n\n`databaseURL` (optional) you can override default `projectId.firebaseio.com` url by setting `databaseURL`, pass the whole url.\n\n`name` (optional) unique identifier for this instance, defaults to `[DEFAULT]`.\n\n`onAuth` (optional) gets called after Firebase's authentication state changes.\n\n`onCancel` (optional) gets called whenever Firebase sync operations fail, e.g. user doesn't have needed permissions.\n\n`pathParams` (optional) gets called with state and result will be provided as second parameter for bindings' path function.\n\n#### Usage example\n```js\nimport { applyMiddleware, createStore, compose, combineReducers } from 'redux'\nimport thunk from 'redux-thunk'\nimport { firebaseReducer, syncFirebase } from 'refire'\n\nconst firebaseBindings = {\n  // Primitives can be defined without setting any type, just set the local sync path\n  // as key and object containing remote path as value.\n  localCounter: {\n    path: \"counterPathInFirebase\"\n  },\n  // Objects can be defined by setting the type as \"Object\"\n  localObject: {\n    type: \"Object\",\n    path: \"objectPathInFirebase\"\n  },\n  // Arrays can be defined by setting the type as \"Array\"\n  // You can also define query, it will fetch the initial values\n  // with given reference params and also keep your binding live on any changes\n  localArray: {\n    type: \"Array\",\n    path: \"arrayPathInFirebase\",\n    query: (ref, state) =\u003e ref.orderByChild(state.routing.query.orderBy)\n  },\n  // If you want to react to state changes, you can define the path dynamically\n  // by setting the path as function.\n  // In this example user store would be populated with user data when user logs in\n  // and automatically cleared when user logs out.\n  user: {\n    type: \"Object\",\n    path: state =\u003e {\n      if (state.firebase.authenticatedUser) {\n        return `users/${state.firebase.authenticatedUser.uid}`\n      } else {\n        return null\n      }\n    }\n  },\n  // You can use populate to easily get related items\n  // Your flattened data (here users/:uid/reviews) should be in format:\n  // {firstReviewId: true, secondReviewId: true, ...}\n  // as described in: https://www.firebase.com/docs/web/guide/structuring-data.html#section-join\n  // Using populate will return an array where placeholder values are replaced with real values from\n  // the path that gets returned in populate function.\n  userReviews: {\n    path: state =\u003e {\n      if (state.firebase.authenticatedUser) {\n        return `users/${state.firebase.authenticatedUser.uid}/reviews`\n      } else {\n        return null\n      }\n    }\n    populate: (key) =\u003e `reviews/${key}`\n  }\n}\n\nconst reducer = combineReducers({\n  firebase: firebaseReducer(firebaseBindings),\n  // your other reducers\n})\nconst store = compose(applyMiddleware(thunk))(createStore)(reducer)\n\nconst {unsubscribe} = syncFirebase({\n  store: store,\n  apiKey: \"BIzaXyD_O6g9v12ozW38XRJ3DYhI-Q3sEDdqYmw\",\n  projectId: \"your-firebase-instance\",\n  bindings: firebaseBindings,\n  onAuth: (authData) =\u003e {},\n  onCancel: (error) =\u003e {}\n})\n```\n\n### React Redux connect helper\n\n#### firebaseToProps(localBindings, mapStateToProps)\n\nCreates selector function for [react-redux's connect](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options).\n\n`firebaseToProps` will return the state of your given bindings as props.\n\nIf you also need to return something else from Redux, pass your normal mapStateToProps as second parameter, firebaseToProps will merge the results.\n\n```js\nclass Counter extends Component {\n  render() {\n    // counter data available as this.props.counter\n  }\n}\nexport default connect(firebaseToProps([\"counter\"]))(Counter)\n```\n\nThere's also special `_status` binding available, it provides an object with latest `authenticatedUser`, `connected`, `errors` and `initialFetchDone` values.\n\n```js\nclass App extends Component {\n\n  render() {\n    const { _status: status } = this.props\n    const connected = status.connected \u0026\u0026 status.initialFetchDone\n\n    if (!connected) {\n      return (\n        \u003cdiv\u003eLoading...\u003c/div\u003e\n      )\n    } else {\n      // firebase connected \u0026 all initial fetching done\n    }\n  }\n}\nexport default connect(firebaseToProps([\"_status\"]))(App)\n```\n\n## Data shape\n\nAll returned values are wrapped in `{key, value}` shaped object for easier consumption.\n\nPrimitives and Objects could be returned as they are, but then consumption of Array elements would be different, it's easier to have uniform way to access keys and values.\n\n### Usage example using ES6 destructuring assignment\n```js\n// Primitives\n// Data shape: {key: \"counter\", value: 1}\nconst {value: counter} = this.props.counter\n\n// Objects\n// Data shape: {key: \"project\", value: {title: \"Cool\"}}\nconst {value: project} = this.props.project\n\n// Arrays\n// Data shape: {key: \"projects\", value: [{key: \"-K1XY-B3ZR...\", value: {title: \"refire\"}}]}\nconst {value: projects} = this.props.projects\nprojects.map(record =\u003e {\n  const {key: id, value: project} = record\n  return \u003cli key={id}\u003e{project.title}\u003c/li\u003e\n})\n```\n\n## Promises needed\n\nRefire uses [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) but doesn't include any polyfill. If you want to use Refire in browsers without Promise support, you have to include something like [es6-promise](https://github.com/stefanpenner/es6-promise) or [native-promise-only](https://github.com/getify/native-promise-only).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoppula%2Frefire","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoppula%2Frefire","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoppula%2Frefire/lists"}