What is Firebridge?

Firebridge provides just the right amount of abstraction for building Firebase applications with React (web & native). Slightly adapted cross-platform patterns from react-firebase-hooks for web and native, along with cloud functions and utilities.

Key Features

• 🤌 Just the right abstraction - Not too much, not too little
• ⚛️ React hooks for state - Built natively with hooks
• 🕹️ Minimal boilerplate - Take back control when needed
• 🔌 Full TypeScript - Types for functions, data, and more
• ☁️ Cloud utilities - Simplified server logic
• 📱 Cross-platform - Consistent API for web & native

Quick Start

# For React (web)
npm install @firebridge/web
# For React Native
npm install @firebridge/native
# For Cloud Functions (optional)
npm install @firebridge/cloud

Wrap your app with the Firebridge provider:

// Webimport{FirebridgeProvider}from'@firebridge/web'import{getAuth}from'firebase/auth'constApp=()=>(<FirebridgeProviderauth={auth}>{/* Your app */}</FirebridgeProvider>)// Nativeimport{FirebridgeProvider}from'@firebridge/native'constApp=()=><FirebridgeProvider>{/* Your app */}</FirebridgeProvider>

Core Concepts

Realtime Document Connection

BEFORE: 🙅 Vanilla Firebase:

const[book,setBook]=useState(null)const[loading,setLoading]=useState(true)useEffect(()=>{constunsubscribe=onSnapshot(doc(db,'books',bookId),doc=>{setBook(doc.data())setLoading(false)})return()=>unsubscribe()},[bookId])

AFTER: 🙋🏼 With Firebridge

constbook=useDocument<Book>(doc(firestore,'books',bookId))

Dynamic User Paths

// Automatically uses authenticated user IDconstprofile=useDocument<Profile>(uid=>doc(firestore,'users',uid))// User's reviews for a specific bookconstreview=useDocument<Review>(uid=>doc(firestore,'books',bookId,'reviews',uid),[bookId],// Re-fetch when bookId changes)

Type-Safe Cloud Functions

// ClientconstreviewBook=useCallable<ReviewBody,ReviewResult>(functions,'reviewBook',)// Usageconstresult=awaitreviewBook({bookId: '123',rating: 5,comment: 'Great book!',})// ServerexportconstreviewBook=onCall(callable<ReviewBody,ReviewResult>({action: async(data,{ auth })=>{// Automatic auth, validation, and type safetyawaitsetReview(auth.uid,data)return{success: true}},}),)

Realtime Collections

// Get the 10 most recent reviews, excluding your ownconstrecentReviews=useCollection<Review>(uid=>query(collection(firestore,'books',bookId,'reviews'),where('authorId','!=',uid),orderBy('metadata.timeCreated','desc'),limit(10),),[bookId],)

Getting Started

# Install
npm install @firebridge/web # or @firebridge/native# Wrap your app
import { FirebridgeProvider } from '@firebridge/web'# Start using hooks
const user = useDocument(uid => doc(firestore, 'users', uid))

Contributing

We welcome contributions! Please feel free to submit a Pull Request.

For bugs and feature requests, please create an issue.