reactfire

WebJar for reactfire

License

License

MIT
Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

reactfire
Last Version

Last Version

0.5.1
Release Date

Release Date

Type

Type

jar
Description

Description

reactfire
WebJar for reactfire
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/firebase/reactfire

Download reactfire

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/reactfire/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>reactfire</artifactId>
    <version>0.5.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/reactfire/
implementation 'org.webjars.npm:reactfire:0.5.1'
// https://jarcasting.com/artifacts/org.webjars.npm/reactfire/
implementation ("org.webjars.npm:reactfire:0.5.1")
'org.webjars.npm:reactfire:jar:0.5.1'
<dependency org="org.webjars.npm" name="reactfire" rev="0.5.1">
  <artifact name="reactfire" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='reactfire', version='0.5.1')
)
libraryDependencies += "org.webjars.npm" % "reactfire" % "0.5.1"
[org.webjars.npm/reactfire "0.5.1"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.npm : firebase jar [2,3)
org.webjars.npm : react jar [0.13,0.14)

Project Modules

There are no modules declared in this project.

ReactFire

All Contributors

Hooks, Context Providers, and Components that make it easy to interact with Firebase.

What is ReactFire?

  • Easy realtime updates for your function components - Hooks like useUserand useFirestoreCollection let you easily subscribe to auth state, realtime data, and all other Firebase SDK events. Plus, they automatically unsubscribe when your component unmounts.
  • Access Firebase libraries from any component - Need the Firestore SDK? useFirestore. Remote Config? useRemoteConfig.
  • Built-in Support for prefetching - Decrease your load times by starting a connection to products like Firestore, Auth, or Realtime Database before the component that consumes that data is rendered with functions like preloadUser
  • Safely configure Firebase libraries - Libraries like Firestore and Remote Config require setting 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 a trusted way to set these settings so you're sure they're set before anything else.

Experimental concurrent mode features

  • Loading states handled by <Suspense> - ReactFire's hooks throw promises that Suspense can catch. No more isLoaded ?... - let React handle it for you.
  • Faster initial page load times - Load only the code you need, when you need it, with useFirestore, useAuth, useRemoteConfig, and more.
  • Convenient components for common use cases - Only want to render a component if a user is signed in? Wrap it in <AuthCheck />. Need to automatically instrument your Suspense load times with RUM? Use <SuspenseWithPerf />.

Install

# npm
npm install --save reactfire firebase

# or

# yarn
yarn add reactfire firebase

Depending on your targeted platforms you may need to install polyfills. The most commonly needed will be globalThis and Proxy.

Docs

Example use

Check out the live version on StackBlitz!

import React, { Component } from "react";
import { render } from "react-dom";

import "firebase/firestore";
import {
  FirebaseAppProvider,
  useFirestoreDocData,
  useFirestore,
} from "reactfire";

const firebaseConfig = {
  /* Add your config from the Firebase Console */
};

function Burrito() {
  // easily access the Firestore library
  const burritoRef = useFirestore().collection("tryreactfire").doc("burrito");

  // subscribe to a document for realtime updates. just one line!
  const { status, data } = useFirestoreDocData(burritoRef);

  // easily check the loading status
  if (status === "loading") {
    return <p>Fetching burrito flavor...</p>;
  }

  return <p>The burrito is {data.yummy ? "good" : "bad"}!</p>;
}

function App() {
  return (
    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
      <h1>🌯</h1>
      <Burrito />
    </FirebaseAppProvider>
  );
}

render(<App />, document.getElementById("root"));

If you're looking for docs for the deprecated ReactFire v1 (the one that uses mixins), click here

Status

Status: Experimental

This 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.

Contributors

Thanks goes to these wonderful people (emoji key):


w3bdesign

💻

Scott Prue

💻

Jeff

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

org.webjars.npm

Firebase

Versions

Version
0.5.1