{"id":26022806,"url":"https://github.com/rinaldo/fire-connect","last_synced_at":"2026-04-09T20:04:02.689Z","repository":{"id":57236518,"uuid":"137938516","full_name":"Rinaldo/fire-connect","owner":"Rinaldo","description":"React bindings for Firebase and Firestore","archived":false,"fork":false,"pushed_at":"2018-06-22T20:18:09.000Z","size":175,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-20T09:24:14.601Z","etag":null,"topics":["firebase","firestore","higher-order-component","hoc","react"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/fire-connect","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/Rinaldo.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":"2018-06-19T19:50:24.000Z","updated_at":"2021-06-06T14:06:02.000Z","dependencies_parsed_at":"2022-08-23T15:50:47.790Z","dependency_job_id":null,"html_url":"https://github.com/Rinaldo/fire-connect","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rinaldo%2Ffire-connect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rinaldo%2Ffire-connect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rinaldo%2Ffire-connect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rinaldo%2Ffire-connect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rinaldo","download_url":"https://codeload.github.com/Rinaldo/fire-connect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242194141,"owners_count":20087515,"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","firestore","higher-order-component","hoc","react"],"created_at":"2025-03-06T10:37:00.230Z","updated_at":"2025-10-17T19:29:54.080Z","avatar_url":"https://github.com/Rinaldo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Fire Connect\n==============\n\nReact bindings for Firebase and Firestore.\n\nFire Connect aims to be a transparent, flexible set of higher order components to help separate Firebase-related concerns from the rest of the application. It  uses the standard Firebase and Firestore syntax, removing the need to learn a new custom syntax and allowing users to follow along with Google's [documentation](https://firebase.google.com/docs/).\n\n## Installation\n\n```\nnpm i fire-connect\n```\n\nReact Firebase requires **[React 16.3](https://github.com/facebook/react) and [Firebase 3](https://www.npmjs.com/package/firebase) or later.**\n\n## Usage\n\n### `firestoreConnect(addListeners, addDispatchers)`\n\nConnects a React component to Firestore and Auth.\n\nWhen invoked, wraps the passed in component in a connector component and gives the passed in component access to the connector's props, state, and context through props.\n\n#### Example\n\n```js\nconst MyComponent = ({ task, isLoaded, newTask }) =\u003e (\n  /* some JSX */\n)\n// single listener\nconst addListeners = (connector, firestore) =\u003e (\n  firestore.collection('tasks').doc('taskId').onSnapshot(doc =\u003e {\n      connector.setState({ task: doc.data(), isLoaded: true })\n  })\n)\nconst addDispatchers = (connector, firestore, user) = ({\n  newTask(task) {\n    firestore.collection('tasks').add({ ...task, authorId: user.uid })\n  },\n  deleteTask(taskId) {\n    firestore.collection('tasks').doc(taskId).delete()\n  }\n})\nexport default firestoreConnect(addListeners, addDispatchers)(MyComponent)\n```\n```js\n// multiple listeners\nconst addListeners = (connector, firestore) =\u003e ({\n  taskA: () =\u003e firestore.collection('tasks').doc('taskA').onSnapshot(doc =\u003e {\n      connector.setState({ taskA: doc.data() })\n  }),\n  taskB: () =\u003e firestore.collection('tasks').doc('taskB').onSnapshot(doc =\u003e {\n      connector.setState({ taskB: doc.data() })\n  }),\n})\n```\n\n#### Arguments\n\n* [`addListeners(connector, firestore, user)`] Returns either a single listener or an object in which the value of each key is a nullary function that itself returns a listener.\n\n* [`addDispatchers(connector, firestore, user)`] Returns an object containing functions that send updates to Firestore, these functions are passed to the wrapped component as props.\n\n  * [`connector`] The `this` reference for the connector component. Can be used to access the connector's props (which includes everything passed to the provider) and call `setState`, among other things\n  * [`firestore`] The Firestore instance passed to the provider (`firebase.firestore()`)\n  * [`user`] If `firebase.auth()` was passed to the provider, it is the user object or `null`. Else, it is `undefined`\n\n#### Returns\n\nA React component class that can be invoked with a component and will pass dispatchers, its state, its props, and its context as props to that component.\n\n### `firebaseConnect(addListeners, addDispatchers)`\n\nConnects a React component to Firebase and Auth.\n\nWhen invoked, wraps the passed in component in a connector component and gives the passed in component access to the connector's props, state, and context through props.\n\n#### Example\n\n```js\nconst MyComponent = ({ task, isLoaded, newTask }) =\u003e (\n  /* some JSX */\n)\n// single listener\nconst addListeners = (connector, ref) =\u003e (\n  ref('tasks').onSnapshot('value', snapshot =\u003e {\n      connector.setState({ task: snapshot.data(), isLoaded: true })\n  })\n)\nconst addDispatchers = (connector, ref, user) = ({\n  newTask(task) {\n    ref('tasks').push().set({ ...task, authorId: user.uid })\n  },\n  deleteTask(taskId) {\n    ref(`tasks/${taskId}`).remove()\n  }\n})\nexport default firebaseConnect(addListeners, addDispatchers)(MyComponent)\n```\n```js\n// multiple listeners\nconst addListeners = (connector, ref, user, setEventType) =\u003e ({\n  taskA: () =\u003e ref('tasks/taskA').on(setEventType('value'), snapshot =\u003e {\n      connector.setState({ taskA: snapshot.data() })\n  }),\n  taskB: () =\u003e ref('tasks/taskB').on('child_added', snapshot =\u003e {\n      connector.setState({ taskA: snapshot.data() })\n  }),\n})\n```\n#### Arguments\n\n* [`addListeners(connector, ref, user, setEventType)`] Returns either a single listener or an object in which the value of each key is a function that takes no arguments and itself returns a listener.\n  \u003e Note: `ref().child()` is not currently supported. Use string concatenation inside of `ref` instead.\n\n* [`addDispatchers(connector, ref, user)`] Returns an object containing functions that send updates to Firebase, these functions are passed to the wrapped component as props.\n\n\n  * [`connector`] The `this` reference for the connector component. Can be used to access the connector's props (which includes everything passed to the provider) and call `setState`, among other things\n  * [`ref`] An internal function that returns the result of calling `firebase.database().ref` and stores the path passed in for unsubscribing when the component unmounts.\n  * [`user`] If `firebase.auth()` was passed to the provider, it is the user object or `null`. Else, it is `undefined`\n  * [`setEventType`] By default, firebaseConnect will call `.off()` with no arguments, removing all listeners at the location `ref` was called with. If this behavior causes problems, the first argument to `.on` (eventType) can be replaced with `setEventType` invoked with a Firebase eventType. (See multiple listeners example above)\n\n#### Returns\n\nA React component class that can be invoked with a component and will pass dispatchers, its state, its props, and its context as props to that component.\n\n### `authConnect(addDispatchers)`\n\nConnects a React component to Auth.\n\nWhen invoked, wraps the passed in component in a connector component and gives the passed in component access to the connector's props and context through props.\n\nAuth can also be accessed in firebaseConnect and firestoreConnect through `connector.props.auth`.\n\n#### Example\n\n```js\nconst MyComponent = ({ login, logout }) =\u003e (\n  /* some JSX */\n)\n\nconst addHostDispatchers = (connector, auth) =\u003e ({\n  login() {\n    auth.signInWithPopup(googleProvider)\n    },\n  logout() {\n    auth.signOut()\n  },\n})\nexport default authConnect(addListeners, addDispatchers)(MyComponent)\n```\n\n#### Arguments\n\n* [`addDispatchers(connector, auth, user)`] Returns an object containing functions that invoke Auth methods, these functions are passed to the wrapped component as props.\n\n  * [`connector`] The `this` reference for the connector component. Can be used to access the connector's props (which includes everything passed to the provider) and call `setState`, among other things\n  * [`auth`] The Auth instance passed to the provider (`firebase.auth()`)\n  * [`user`] If `firebase.auth()` was passed to the provider, it is the user object or `null`. Else, it is `undefined`\n\n#### Returns\n\nA React component class that can be invoked with a component and will pass dispatchers, its props, and its context as props to that component.\n\n### `\u003cProvider auth database firestore (anyOtherProps)\u003e`\n\nThe `\u003cProvider\u003e` component wraps the application and uses the context API to pass auth, database, and Firestore references to connected components, as well as any other data the connected components should have. If passed an auth prop, it will initialize an auth listener and pass connected components the resulting user object.\n\n#### Props\n\n* [`auth`] `firebase.auth()`\n* [`database`] `firebase.database()`\n* [`firestore`] `firebase.firestore()`\n* [`children`] (*ReactElement*): The root of the component hierarchy.\n* [`onIdTokenChanged`] Boolean prop that toggles whether the auth listener is `onIdTokenChanged` or the default `onAuthStateChanged`.\n* Any other props passed to `\u003cProvider\u003e` will be put in its context and accessible to connected components.\n\n#### Example\n\n```js\nrender(\n  \u003cProvider\n    auth={firebase.auth()}\n    database={firebase.database()}\n    firestore={firebase.firestore()}\n    firebaseTimestamp={firebase.database.ServerValue.TIMESTAMP}\n  \u003e\n    \u003cApp /\u003e\n  \u003c/Provider\u003e,\n  document.getElementById('app')\n)\n```\n\n## FAQ\n\n**Can I access Firestore in firebaseConnect or firebase in firestoreConnect?**\n\nYes! The Firebase reference can be found at `connector.props.database` and the Firestore reference can be found at `connector.props.firestore`. You can use the Firebase `once` method or Firestore `get` method to fetch data and use any methods to add, update, or delete data. However, setting up listeners is not recommended as they will not be automatically unsubscribed when the component unmounts.\n\n**Can I save a Firebase ref or Firestore docRef to a variable so I don't have to keep retypeing a long path?**\n\nYes! One way to do it is to set a property of the wrapper component in either `addListeners` or `addDispatchers`. Something like `connector.myRef = ref('some/really/long/path')`. If you're using a property in both `addListeners` and `addDispatchers`, it's better to declare it in `addDispatchers` as `addDispatchers` is invoked in the constructor and `addListeners` is invoked in `componentDidMount`.\n\n## License\n\nMIT\n\n## Acknowledgements\n\n[`react-firebase`](https://github.com/unfold/react-firebase)\n\n[`react-redux-firebase`](https://github.com/prescottprue/react-redux-firebase)\n\n[`react-redux`](https://github.com/reactjs/react-redux)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frinaldo%2Ffire-connect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frinaldo%2Ffire-connect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frinaldo%2Ffire-connect/lists"}