Skip to content

Instantly share code, notes, and snippets.

@davidnagli
Created October 29, 2018 20:25
Show Gist options
  • Save davidnagli/50323f580588300d6e2c8faaa685a389 to your computer and use it in GitHub Desktop.
Save davidnagli/50323f580588300d6e2c8faaa685a389 to your computer and use it in GitHub Desktop.
Dead Simple Firebase React Hook
//useFirebase.js
import firebase from 'firebase';
import {useState, useEffect} from 'react';
export function useFirebase(refName){
const [state, setState] = useState(null);
useEffect(()=>{
firebase.database().ref(refName).on('value', snapshot => {
setState(snapshot.val())
})
}, [refName])
const setRef = (newValue) => {
firebase.database().ref(refName).set(newValue)
}
//todo: return setRef as an array [state, setRef]
return [state, setRef];
}
// Example usage:
// Note: Make sure you initialize firebase!
// (I recommend you do this in index.js or similer since Firebase throws an error if you attempt to initialize twice)
import React from 'react';
import { useFirebase } from './useFirebase';
export default function Hi() {
const [foo, setFoo] = useFirebase('foo');
return (
<div>
<div>Hooks version - Foo: {foo}</div>
<button onClick={()=>{setFoo('ayyy')}}>Update</button>
</div>
);
}
@carloslahrssen
Copy link

Good stuff right here

@davidnagli
Copy link
Author

davidnagli commented Oct 29, 2018

Ultra minified version (193 Bytes):

import z from"firebase";import{useState as f,useEffect as g}from"react";export default e=>{let[t,a]=f(),r=z.database().ref(e);g(e=>{r.on("value",e=>{a(e.val())})},[e]);return[t,e=>{r.set(e)}]};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment