{"id":15905733,"url":"https://github.com/hoppula/react-firebase-web","last_synced_at":"2025-03-21T01:31:55.181Z","repository":{"id":34885039,"uuid":"170699179","full_name":"hoppula/react-firebase-web","owner":"hoppula","description":"React Firebase components with render props","archived":false,"fork":false,"pushed_at":"2022-02-11T21:56:51.000Z","size":250,"stargazers_count":6,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-13T16:50:40.151Z","etag":null,"topics":["firebase","react","react-firebase","render-props"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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":null,"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":"2019-02-14T13:54:20.000Z","updated_at":"2023-03-25T06:59:04.000Z","dependencies_parsed_at":"2022-08-08T02:15:33.534Z","dependency_job_id":null,"html_url":"https://github.com/hoppula/react-firebase-web","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoppula%2Freact-firebase-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoppula%2Freact-firebase-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoppula%2Freact-firebase-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoppula%2Freact-firebase-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoppula","download_url":"https://codeload.github.com/hoppula/react-firebase-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244721272,"owners_count":20498922,"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","react-firebase","render-props"],"created_at":"2024-10-06T13:07:44.249Z","updated_at":"2025-03-21T01:31:54.890Z","avatar_url":"https://github.com/hoppula.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-firebase-web ☢️🔥🕸\n\n\u003e React Firebase components with render props\n\n`react-firebase-web` provides useful set of React components with easy-to-use APIs to access most of Firebase's features.\n\n## Installation\n\n### Using npm\n\n```\nnpm install -S react-firebase-web\n```\n\n### Using yarn\n\n```\nyarn add react-firebase-web\n```\n\n## Usage\n\n```javascript\n\u003cFirebase\n  apiKey=\"AKzuSyD_O5g9322ozW28XRJ3MPgI-Q2sEBwqYmx\"\n  projectId=\"react-forum-example\"\n\u003e\n  \u003cValue path=\"users/admin\"\u003e{admin =\u003e \u003cdiv\u003e{admin.name}\u003c/div\u003e}\u003c/Value\u003e\n  \u003cList path=\"users/test/posts\" query={ref =\u003e ref.orderByKey().limitToLast(10)}\u003e\n    {last10Posts =\u003e (\n      \u003cul\u003e\n        {last10Posts.map(({ key, value: post }) =\u003e (\n          \u003cli key={key}\u003e{post.title}\u003c/li\u003e\n        ))}\n      \u003c/ul\u003e\n    )}\n  \u003c/List\u003e\n  \u003cUser\n    children={user =\u003e {\n      return user.uid ? \u003cdiv\u003e{user.displayName}\u003c/div\u003e : \u003cdiv /\u003e\n    }}\n  /\u003e\n  \u003cWrite method=\"push\" to=\"users\"\u003e\n    {pushToUsers =\u003e \u003cAddUser addUser={pushToUsers} /\u003e}\n  \u003c/Write\u003e\n\u003c/Firebase\u003e\n```\n\n## CodeSandbox examples\n\nThese CodeSandbox examples use `firebase-mock`, so feel free to mess around as any change is only applied locally and reseted after reload.\n\n- [Connected, shows Firebase connection status](https://codesandbox.io/embed/8zy4z1p8p0)\n- [Value, shows how to read and update single value](https://codesandbox.io/embed/91954r1x2r)\n- [Todos, shows to how to read and update list of values](https://codesandbox.io/embed/8kjp7n7pl2)\n- [Populate, shows how to populate related data given a list of ids](https://codesandbox.io/embed/r0zj7pq61o)\n- [Login and logout, shows how to login with email \u0026 OAuth, how to log out and how to show currently logged-in user](https://codesandbox.io/embed/7j646y17pj)\n\n## Components\n\n### Firebase\n\n\u0026lt;Firebase/\u0026gt; places Firebase instance to React's context, so all the other components can access it. You should wrap your app inside \u0026lt;Firebase/\u0026gt; component.\n\n#### Usage\n\n```javascript\n\u003cFirebase\n  apiKey=\"your-api-key\"\n  projectId=\"your-project-id\"\n  databaseUrl=\"your-database-url (optional)\"\n  firebase={yourCustomFirebaseImplementation} // optional, allows using API compatible implementation, e.g. firebase-mock for tests\n\u003e\n  \u003cYourApp /\u003e\n\u003c/Firebase\u003e\n```\n\n### Connected\n\n\u0026lt;Connected/\u0026gt; provides the current Firebase connection status as only argument for `children` render function.\n\n#### Usage\n\n```javascript\n\u003cConnected children={connected =\u003e (connected ? \"Online\" : \"Offline\")} /\u003e\n```\n\n### List\n\n\u0026lt;List/\u0026gt; provides given Firebase `path` as an array for given `children` render function. All array items have `key` and `value` properties. List gets re-rendered whenever there are updates to referred Firebase data.\n\nYou can provide `once` prop if you do not want realtime updates.\n\nThere's also `query` prop for limiting results, it accepts a function that gets called with Firebase reference, e.g. `ref =\u003e ref.orderByKey().limitToLast(10)`\n\n#### Usage\n\n```javascript\n\u003cList\n  path=\"list\"\n  children={list =\u003e (\n    \u003cul\u003e\n      {list.map(({ key, value: item }) =\u003e (\n        \u003cli key={key}\u003e{item.name}\u003c/li\u003e\n      ))}\n    \u003c/ul\u003e\n  )}\n/\u003e\n```\n\n### Value\n\n\u0026lt;Value/\u0026gt; provides value of given Firebase `path` as an object for given `children` render function. Value gets re-rendered whenever there are updates to referred Firebase data.\n\nYou can provide `once` prop if you do not want realtime updates.\n\n#### Usage\n\n```javascript\n\u003cValue path=\"value\" children={value =\u003e \u003cdiv\u003e{value \u0026\u0026 value.name}\u003c/div\u003e} /\u003e\n```\n\n### Populate\n\n\u0026lt;Populate/\u0026gt; takes `from` prop (object with shape `{key1: true, key2: true, ...}`) and populates an array of related objects using `with` prop (function with key, `` key =\u003e `relatedPath/${key}` ``) for given `children` render function.\n\nAll array items have `key` and `value` properties. Populate gets re-rendered whenever there are updates to referred Firebase data.\n\n#### Usage\n\n```javascript\n\u003cPopulate\n  from={bookmarkedArticleIds}\n  with={articledId =\u003e `articles/${articledId}`}\n  children={articles =\u003e (\n    \u003cul\u003e\n      {articles.map(({ key, value: article }) =\u003e (\n        \u003cli key={key}\u003e{article.title}\u003c/li\u003e\n      ))}\n    \u003c/ul\u003e\n  )}\n/\u003e\n```\n\n### User\n\n\u0026lt;User/\u0026gt; component renders given `children` render function with currently logged in user. Render function will receive an empty object when user is not logged in.\n\n#### Usage\n\n```javascript\n\u003cUser\n  children={user =\u003e {\n    if (user.uid) {\n      return \u003cdiv\u003e{user.displayName} Logout\u003c/div\u003e\n    } else {\n      return \u003cdiv\u003eLogin\u003c/div\u003e\n    }\n  }}\n/\u003e\n```\n\n### OAuthLogin\n\n\u0026lt;OAuthLogin/\u0026gt; renders given `children` render function with `login` function, which can be passed to `onClick` handler for example.\n\n`flow` prop accepts `popup` and `redirect` as authentication flows.\n\n`provider` props accepts `facebook`, `github`, `google` and `twitter` as OAuth providers.\n\n#### Usage\n\n```javascript\n\u003cOAuthLogin\n  flow=\"popup\"\n  provider=\"google\"\n  children={login =\u003e \u003cbutton onClick={login}\u003eLogin with Google\u003c/button\u003e}\n/\u003e\n```\n\n### Logout\n\n\u0026lt;Logout/\u0026gt; provides `logout` function for given `children` render function, it can then be passed to event handlers, e.g. `onClick`.\n\n#### Usage\n\n```javascript\n\u003cLogout children={logout =\u003e \u003cbutton onClick={logout}\u003eLogout\u003c/button\u003e} /\u003e\n```\n\n### Write\n\n\u0026lt;Write/\u0026gt; provides mutator function for given `children` render function.\n\n`method` prop accepts `push`, `set`, `update` and `transaction`.\n\n`to` prop accepts path to mutate as a string.\n\n#### Usage\n\n```javascript\n\u003cWrite\n  method=\"push\"\n  to=\"posts\"\n  children={pushToPosts =\u003e {\n    return (\n      \u003cbutton onClick={() =\u003e pushToPosts({ title: \"Test\" })}\u003e\n        Push to posts\n      \u003c/button\u003e\n    )\n  }}\n/\u003e\n```\n\n### EmailLogin\n\n\u0026lt;EmailLogin/\u0026gt; logs user in using Firebase Auth's `signInWithEmailAndPassword` method.\n\nGiven `children` render function receives single parameter, a function that logs user in.\n\nThat function accepts `email` and `password` as params and returns a `Promise`.\n\n#### Usage\n\n```javascript\n\u003cEmailLogin\n  children={login =\u003e (\n    \u003cbutton onClick={() =\u003e login(\"test@email.dev\", \"password\")}\u003eLogin\u003c/button\u003e\n  )}\n/\u003e\n```\n\n### Registration\n\n\u0026lt;Registration/\u0026gt; registers new user using Firebase Auth's `createUserWithEmailAndPassword` method.\n\nGiven `children` render function receives single parameter, a function that creates new user.\n\nThat function accepts `email` and `password` as params and returns a `Promise`.\n\n#### Usage\n\n```javascript\n\u003cRegistration\n  children={register =\u003e (\n    \u003cbutton onClick={() =\u003e register(\"test@test.dev\", \"test\")}\u003e\n      Create user\n    \u003c/button\u003e\n  )}\n/\u003e\n```\n\n### ResetPassword\n\n\u0026lt;ResetPassword/\u0026gt; sends password reset e-mail using Firebase Auth's `sendPasswordResetEmail` method.\n\nGiven `children` render function receives single parameter, a function that sends password reset e-mail.\n\nThat function accepts `email` as a param and returns a `Promise`.\n\n#### Usage\n\n```javascript\n\u003cResetPassword\n  children={sendResetEmail =\u003e (\n    \u003cbutton onClick={() =\u003e sendResetEmail(\"test@test.dev\")}\u003e\n      Send reset password e-mail\n    \u003c/button\u003e\n  )}\n/\u003e\n```\n\n### Upload\n\n\u0026lt;Upload/\u0026gt; is a component that uploads files to Firebase storage.\n\n`onUpload` prop function is called when upload completes. It receives upload snapshot and rootRef, so you can store references to uploaded files to some other location in your Firebase database.\n\n```javascript\nonComplete = (snapshot, rootRef) =\u003e {\n  rootRef\n    .child(`users/${this.props.user.uid}/uploads`)\n    .push(snapshot.downloadURL)\n}\n```\n\n`path` prop defines where uploaded files should be stored.\n\n`children` render function receives an object with:\n\n- `uploadFiles` a function that uploads the provided files, can be used directly as `react-dropzone`'s `onDrop` callback prop.\n\n- `uploads` array of user's uploaded files.\n\nThe example below uses `react-dropzone`.\n\n**NOTE:** Remember to enable Firebase storage in your Firebase control panel before using Upload component.\n\n#### Usage\n\n```javascript\n\u003cUpload\n  onUpload={this.onComplete}\n  path=\"uploads\"\n  children={({ uploadFiles, uploads }) =\u003e {\n    return (\n      \u003cDropzone onDrop={uploadFiles}\u003e\n        {uploads.map(upload =\u003e {\n          const { snapshot, error, success } = upload\n          if (error) {\n            return \u003cdiv\u003eError\u003c/div\u003e\n          }\n          if (success) {\n            return \u003cdiv\u003eSuccess {snapshot.downloadURL}\u003c/div\u003e\n          }\n          return \u003cdiv\u003eUploading...\u003c/div\u003e\n        })}\n      \u003c/Dropzone\u003e\n    )\n  }}\n/\u003e\n```\n\n### Download\n\n\u0026lt;Download/\u0026gt; allows you to get download url for provided Firebase Storage reference. Given `children` render function receives an object with `url` property.\n\nIf you set `metadata` prop as true, provided object will also include `metadata` object, which includes file metadata, such as `contentType`.\n\n#### Usage\n\n```javascript\n\u003cDownload\n  path=\"https://firebasestorage.googleapis.com/v0/b/example-project-sd5c9.appspot.com/o/uploads%2Factivity.svg?alt=media\u0026token=1e39160x-fgd1-4c15-a4bf-701f12d3d754\"\n  metadata\n\u003e\n  {download =\u003e (\n    \u003cdiv\u003e\n      \u003cimg src={download.url} /\u003e {download.metadata.contentType}\n    \u003c/div\u003e\n  )}\n\u003c/Download\u003e\n```\n\n## React Hooks\n\nThis project will be likely rewritten using [hooks](https://reactjs.org/docs/hooks-intro.html) soon, but it will still provide current render prop components as an alternative.\n\n## Firestore\n\nFirestore support is in progress, no ETA yet.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoppula%2Freact-firebase-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoppula%2Freact-firebase-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoppula%2Freact-firebase-web/lists"}