Skip to content

Instantly share code, notes, and snippets.

Avatar

Doug Safreno dsafreno

View GitHub Profile
@dsafreno
dsafreno / firebase-hook.js
Created Jan 14, 2020
React Hooks for loading Firebase Data
View firebase-hook.js
import React, { useReducer, useEffect, useRef } from 'react';
import firebase from 'firebase/app';
import equal from 'deep-equal';
function filterKeys(raw, allowed) {
if (!raw) {
return raw;
}
let s = new Set(allowed);
return Object.keys(raw)
@dsafreno
dsafreno / rtdb-component-after.js
Created Oct 16, 2019
Firebase RTDB Component - withDbData
View rtdb-component-after.js
class Example extends React.Component {
componentDidMount() {
// first time we got data!
}
render() {
let {user, team} = this.props;
// don't need to null check since we await the data!
}
}
@dsafreno
dsafreno / rtdb-component.js
Created Oct 16, 2019
Firebase RTDB Component, before withDbData
View rtdb-component.js
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { user: null, team: null };
}
componentDidMount() {
let {userId, teamId} = this.props;
// subscribe to user data
let userRef = firebase.database().ref(`users/${userId}`);
let userOff = userRef.on('value', (snap) => {
@dsafreno
dsafreno / withDbData.js
Last active Jul 21, 2020
Helper to use Firebase RTDB with React more conveniently. From https://pragli.com/blog/how-we-use-firebase-instead-of-redux-with-react
View withDbData.js
import React from 'react';
import firebase from 'firebase/app';
import equal from 'deep-equal';
function filterKeys(raw, allowed) {
if (!raw) {
return raw;
}
let s = new Set(allowed);
return Object.keys(raw)
You can’t perform that action at this time.