{"id":13469729,"url":"https://github.com/FirebaseExtended/reactfire","last_synced_at":"2025-03-26T07:31:06.579Z","repository":{"id":16492867,"uuid":"19245530","full_name":"FirebaseExtended/reactfire","owner":"FirebaseExtended","description":"Hooks, Context Providers, and Components that make it easy to interact with Firebase.","archived":false,"fork":false,"pushed_at":"2024-10-09T19:07:35.000Z","size":6570,"stargazers_count":3540,"open_issues_count":81,"forks_count":403,"subscribers_count":99,"default_branch":"main","last_synced_at":"2024-10-29T09:50:32.994Z","etag":null,"topics":["firebase","firebase-js-sdk","firestore","react","react-hooks","react-suspense","realtime-database"],"latest_commit_sha":null,"homepage":"https://firebaseopensource.com/projects/firebaseextended/reactfire/","language":"TypeScript","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/FirebaseExtended.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-04-28T16:27:17.000Z","updated_at":"2024-10-20T17:58:02.000Z","dependencies_parsed_at":"2023-01-13T18:52:34.678Z","dependency_job_id":"9b6a4268-f0d2-4d06-9840-7c8ad8050b83","html_url":"https://github.com/FirebaseExtended/reactfire","commit_stats":{"total_commits":496,"total_committers":68,"mean_commits":7.294117647058823,"dds":0.7459677419354839,"last_synced_commit":"9429194d9dfed9a4b37129661d230ebcd0071e89"},"previous_names":["firebase/reactfire"],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FirebaseExtended%2Freactfire","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FirebaseExtended%2Freactfire/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FirebaseExtended%2Freactfire/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FirebaseExtended%2Freactfire/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FirebaseExtended","download_url":"https://codeload.github.com/FirebaseExtended/reactfire/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222077574,"owners_count":16927218,"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","firebase-js-sdk","firestore","react","react-hooks","react-suspense","realtime-database"],"created_at":"2024-07-31T15:01:53.184Z","updated_at":"2024-10-29T22:31:25.871Z","avatar_url":"https://github.com/FirebaseExtended.png","language":"TypeScript","readme":"# ReactFire\n\nHooks, Context Providers, and Components that make it easy to interact with\nFirebase.\n\n## What is ReactFire?\n\n- **Easy realtime updates for your function components** - Hooks\n  like `useUser`and `useFirestoreCollection` let you easily subscribe to\n  auth state, realtime data, and all other Firebase SDK events. Plus, they automatically unsubscribe when your component unmounts.\n- **Access Firebase libraries from any component** - Need the Firestore SDK? `useFirestore`. Remote Config? `useRemoteConfig`.\n- **Safely configure Firebase libraries** - Libraries like Firestore and Remote Config require settings like `enablePersistence` to be set before any data fetches are made. This can be tough to support in React's world of re-renders. ReactFire gives you `useInitFirestore` and `useInitRemoteConfig` hooks that guarantee they're set before anything else.\n\n## Install\n\n```bash\n# npm\nnpm install --save firebase reactfire\n\n# or\n\n# yarn\nyarn add firebase reactfire\n```\n\nDepending on your targeted platforms you may need to install polyfills. The most commonly needed will be [globalThis](https://caniuse.com/#search=globalThis) and [Proxy](https://caniuse.com/#search=Proxy).\n\n## Docs\n\n- [**Quickstart**](./docs/quickstart.md)\n- [**Common Use Cases**](./docs/use.md)\n- [**API Reference**](./docs/reference)\n- [**v3 -\u003e v4 Upgrade Guide**](./docs/upgrade-guide.md)\n\n## Example use\n\nCheck out the\n[live version on StackBlitz](https://stackblitz.com/fork/reactfire-v4-sample)!\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\n\nimport { doc, getFirestore } from 'firebase/firestore';\nimport { FirebaseAppProvider, FirestoreProvider, useFirestoreDocData, useFirestore, useFirebaseApp } from 'reactfire';\n\nconst firebaseConfig = {\n  /* Add in your config object from the Firebase console */\n};\n\nfunction BurritoTaste() {\n  // access the Firestore library\n  const burritoRef = doc(useFirestore(), 'tryreactfire', 'burrito');\n\n  // subscribe to a document for realtime updates. just one line!\n  const { status, data } = useFirestoreDocData(burritoRef);\n\n  // check the loading status\n  if (status === 'loading') {\n    return \u003cp\u003eFetching burrito flavor...\u003c/p\u003e;\n  }\n\n  return \u003cp\u003eThe burrito is {data.yummy ? 'good' : 'bad'}!\u003c/p\u003e;\n}\n\nfunction App() {\n  const firestoreInstance = getFirestore(useFirebaseApp());\n  return (\n    \u003cFirestoreProvider sdk={firestoreInstance}\u003e\n      \u003ch1\u003e🌯\u003c/h1\u003e\n      \u003cBurritoTaste /\u003e\n    \u003c/FirestoreProvider\u003e\n  );\n}\n\nrender(\n  \u003cFirebaseAppProvider firebaseConfig={firebaseConfig}\u003e\n    \u003cApp /\u003e\n  \u003c/FirebaseAppProvider\u003e,\n  document.getElementById('root')\n);\n```\n\n---\n\n## Status\n\n![Status: Experimental](https://img.shields.io/badge/Status-Experimental-blue)\n\nThis repository is maintained by Googlers but is not a supported Firebase product. Issues here are answered by maintainers and other community members on GitHub on a best-effort basis.\n\n### Extra Experimental [concurrent mode](https://reactjs.org/docs/concurrent-mode-suspense.html) features\n\nThese features are marked as *extra experimental* because they use experimental React features that [will not be stable until sometime after React 18 is released](https://github.com/reactwg/react-18/discussions/47#:~:text=Likely%20after%20React%2018.0%3A%20Suspense%20for%20Data%20Fetching).\n\n- **Loading states handled by `\u003cSuspense\u003e`** - ReactFire's hooks throw promises\n  that Suspense can catch. Let React\n  [handle loading states for you](https://reactjs.org/docs/concurrent-mode-suspense.html).\n- **Automatically instrument your `Suspense` load times** - Need to automatically instrument your `Suspense` load times with [RUM](https://firebase.google.com/docs/perf-mon)? Use `\u003cSuspenseWithPerf /\u003e`.\n\nEnable concurrent mode features by following the [concurrent mode setup guide](https://reactjs.org/docs/concurrent-mode-adoption.html#installation) and then setting the `suspense` prop in `FirebaseAppProvider`:\n\n```jsx\n\u003cFirebaseAppProvider firebaseConfig={firebaseConfig} suspense={true}\u003e\n```\n\nSee concurrent mode code samples in [example/withSuspense](https://github.com/FirebaseExtended/reactfire/tree/main/example/withSuspense)\n","funding_links":[],"categories":["TypeScript","Uncategorized","Firebase Tools \u0026 Frameworks","Tools","开发工具与框架集成","Others","웹"],"sub_categories":["Uncategorized","Firebase Courses \u0026 Training","VS Code Extensions for Developer Productivity","Web 相关","Mesh networks"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFirebaseExtended%2Freactfire","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFirebaseExtended%2Freactfire","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFirebaseExtended%2Freactfire/lists"}