https://github.com/rakannimer/react-firebase-firestore

Render Data from your Firestore Database
https://github.com/rakannimer/react-firebase-firestore

Last synced: 12 days ago
JSON representation

Render Data from your Firestore Database

• Host: GitHub
• URL: https://github.com/rakannimer/react-firebase-firestore
• Owner: rakannimer
• Created: 2018-08-19T16:20:20.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-09-03T09:35:26.000Z (over 6 years ago)
• Last Synced: 2024-12-16T22:13:42.400Z (2 months ago)
• Language: TypeScript
• Size: 58.6 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Docs moved to : https://react-firebase-js.com/docs/react-firestore-database/getting-started

## Source code moved to : https://github.com/rakannimer/react-firebase/

## Package moved to : `@react-firebase/firestore`

- [React Firebase Firestore](#react-firebase-firestore)

    - [Usage](#usage)

    - [Example](#example)

  - [Reference](#reference)

# React Firebase Firestore

Easily render data from your firestore database in your react(-native) app.

React Firestore provides the following components :

- FirestoreProvider

- FirestoreCollection

- FirestoreDocument

### Usage

1. Change PROJECT_NAME to your project name and grab your firebase config here :

   https://console.firebase.google.com/project/PROJECT_NAME/settings/general/

```javascript

// Firebase Config

const config = {

  apiKey: "API_KEY",

  projectId: "PROJECT_ID",

  databaseURL: "DATABASE_URL",

  authDomain: "AUTH_DOMAIN",

  // OPTIONAL

  storageBucket: "STORAGE_BUCKET",

  messagingSenderId: "MESSAGING_SENDER_ID"

};

```

2. Place a `FirestoreProvider` Component anywhere in your component tree as an ancestor to any `FirestoreCollection` or `FirestoreDocument` and pass to it your firebase config.

### Example

```javascript

import firebase from "firebase/app";

import "firebase/firestore";

import {

  FirestoreProvider,

  FirestoreCollection,

  FirestoreDocument

} from "react-firebase-firestore";

import ReactJson from "react-json-view";

const config = {

  apiKey: credentials.apiKey,

  authDomain: credentials.authDomain,

  databaseURL: credentials.databaseURL,

  projectId: credentials.projectId,

  storageBucket: credentials.storageBucket,

  messagingSenderId: credentials.messagingSenderId

};

const App = () => {

  return (

    

      
oh hai

      

        {d => {

          return d.loadingStatus === "ready" ? (

            

          ) : (

            "Loading"

          );

        }}

      

      


        
oh hai again

        

          {d => {

            return d.loadingStatus === "ready" ? (

              

            ) : (

              "Loading"

            );

          }}

        

      

    

  );

};

```


## [Reference](https://firebase.google.com/docs/firestore/)