{"id":26720196,"url":"https://github.com/egodact/react-global-from-firebase","last_synced_at":"2026-05-06T09:40:49.327Z","repository":{"id":37736266,"uuid":"127285942","full_name":"egodact/react-global-from-firebase","owner":"egodact","description":"React component that sets up a global state from Firebase refs","archived":false,"fork":false,"pushed_at":"2022-12-08T18:13:19.000Z","size":2175,"stargazers_count":2,"open_issues_count":22,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-25T06:58:40.959Z","etag":null,"topics":["firebase","global","react","react-component"],"latest_commit_sha":null,"homepage":"","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/egodact.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":"2018-03-29T12:07:01.000Z","updated_at":"2019-09-30T19:24:28.000Z","dependencies_parsed_at":"2023-01-25T15:30:54.677Z","dependency_job_id":null,"html_url":"https://github.com/egodact/react-global-from-firebase","commit_stats":null,"previous_names":["rafaelklaessen/react-global-from-firebase"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/egodact/react-global-from-firebase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egodact%2Freact-global-from-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egodact%2Freact-global-from-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egodact%2Freact-global-from-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egodact%2Freact-global-from-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/egodact","download_url":"https://codeload.github.com/egodact/react-global-from-firebase/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egodact%2Freact-global-from-firebase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31464102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"online","status_checked_at":"2026-04-06T02:00:07.287Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","global","react","react-component"],"created_at":"2025-03-27T18:32:40.102Z","updated_at":"2026-04-06T08:01:51.786Z","avatar_url":"https://github.com/egodact.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-global-from-firebase\nReact component that sets up a global state from Firebase refs\n\n![Demo screenshot](https://github.com/rafaelklaessen/react-global-from-firebase/raw/master/screenshots/screenshot.png \"Screenshot of the demo\")\n\n## Install\n`yarn add react-global-from-firebase` or `npm install --save react-global-from-firebase`\n\n## Usage\nSee the [demo](https://github.com/rafaelklaessen/react-global-from-firebase/tree/master/demo/src) for full example.\n\n```javascript\nimport * as firebase from 'firebase';\nimport GlobalFromFirebase from 'react-global-from-firebase';\n\nconst ref = firebase.database().ref();\n\nconst App = () =\u003e (\n  \u003cGlobalFromFirebase\n    firebaseRefs={{\n      foo: ref.child('foo'),\n      bar: {\n        ref: ref.child('bar'),\n        idRef: ref.child('barId') // For caching\n      }\n    }}\n    loadingScreen={() =\u003e \u003ch1\u003eLoading\u003c/h1\u003e}\n  \u003e\n    \u003cdiv\u003eBlah\u003c/div\u003e\n  \u003c/GlobalFromFirebase\u003e\n);\n```\n\n## Caveats\nFor some reason, the direct children of GlobalFromFirebase cannot use the `global` object correctly (since the ref values haven't been set yet). This shouldn't be too much of an issue since you could just put the code that relies on `global` in a separate component, that'll work.\n\nSee the [demo](https://github.com/rafaelklaessen/react-global-from-firebase/tree/master/demo/src) for an example.\n\n## Props\n`*` = required\n\nProp | Description | Type\n---- | ----------- | ----\n`firebaseRefs*` | The refs that should be loaded into the `global` object. The ref value will be added to the `global` object under given key (eg if you do `{ foo: ref.child('bar') }`, `global.foo` will be set to the value of `ref.child('bar')`). | `object`\n`loadingScreen` | Node to show while the ref values are loading. Can also take a function that returns an node \u003cbr\u003e *Signature of the function when passed:* \u003cbr\u003e `function(state: object) =\u003e node` | `node` or `function`\n`onUpdate` | Invoked whenever a Firebase value is updated | `function(state: object) =\u003e any`\n`children*` | Children of the component | `node`\n\n## Caching\nNormally, the object you'd pass to the `firebaseRefs` prop would look like this:\n```javascript\n{\n  foo: someRef.child('foo'),\n  bar: someRef.child('baz')\n}\n```\nIt is however possible to cache the values of refs. To do this, an `idRef` is expected (see example below). The `idRef` is supposed to be a ref that contains some unique ID of the given ref's value. The value of the given ref will only be fetched when this ID changes or when it isn't cached yet. Below is an example with two cached refs:\n```javascript\n{\n  foo: {\n    ref: someRef.child('foo'),\n    idRef: someRef.child('fooId')\n  },\n  bar: {\n    ref: someRef.child('baz'),\n    idRef: someRef.child('bazId')\n  }\n}\n```\nCaching only makes sense when the ref contains a large value that should be fetched as little as possible.\n\n## Development\n### Installation\n`yarn install` or `npm install`\n\n### Run demo\n`yarn start` or `npm start`\n\n### Run tests\n`yarn test` or `npm test`\n\n#### Building\n`yarn build` or `npm run build` will build the component for publishing to npm and also bundle the demo app.\n\n`yarn clean` or `npm run clean` will delete built resources.\n\nNotice that you'll need to temporarily delete `.babelrc` to be able to build the component (just put it back after you're done building).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegodact%2Freact-global-from-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fegodact%2Freact-global-from-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegodact%2Freact-global-from-firebase/lists"}