https://github.com/wobsoriano/solid-firebase

Solid primitives for Firebase v9.
https://github.com/wobsoriano/solid-firebase

firebase solid solid-js

Last synced: 8 days ago
JSON representation

Solid primitives for Firebase v9.

• Host: GitHub
• URL: https://github.com/wobsoriano/solid-firebase
• Owner: wobsoriano
• License: mit
• Created: 2022-02-07T05:40:49.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-08-07T01:42:53.000Z (over 1 year ago)
• Last Synced: 2024-10-29T18:05:54.703Z (10 days ago)
• Topics: firebase, solid, solid-js
• Language: TypeScript
• Homepage:
• Size: 320 KB
• Stars: 75
• Watchers: 2
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-solid-js - Solid Firebase

README

        


  



# solid-firebase

Solid primitives for Firebase.

> ⚠️ This package only works with [Firebase 9 or above with modular style](https://firebase.google.com/docs/web/modular-upgrade).

## Quick start

Install it:

```bash

npm install firebase solid-firebase

```

Configure firebase app:

```tsx

import { render } from 'solid-js/web'

import { initializeApp } from 'firebase/app'

import { FirebaseProvider } from 'solid-firebase'

import App from './App'

const app = initializeApp({ projectId: 'MY PROJECT ID' })

render(

  () => (

    

      

    

  ),

  document.getElementById('root'),

)

```

## Primitives

The primitive [useFirebaseApp](https://github.com/wobsoriano/solid-firebase/blob/master/packages/lib/src/hooks/useFirebaseApp.tsx) gives you access to the initialized firebase app.

### Authentication

[useAuth](https://github.com/wobsoriano/solid-firebase/blob/master/packages/lib/src/hooks/useAuth.tsx) is a [Firebase Auth](https://firebase.google.com/docs/auth) binding to easily react to changes in the users' authentication status.

```tsx

import { Match, Switch } from 'solid-js'

import { GoogleAuthProvider, getAuth, signInWithPopup } from 'firebase/auth'

import { useAuth, useFirebaseApp } from 'solid-firebase'

function Login() {

  const app = useFirebaseApp()

  const signIn = () => signInWithPopup(getAuth(app), new GoogleAuthProvider())

  return Sign In with Google

}

function App() {

  const app = useFirebaseApp()

  const state = useAuth(getAuth(app))

  return (

    }>

      

        
Loading...

      

      

        

      

      

        

      

    

  )

}

```


### Cloud Firestore

[useFirestore](https://github.com/wobsoriano/solid-firebase/blob/master/packages/lib/src/hooks/useFirestore.tsx) is a [Cloud Firestore](https://firebase.google.com/docs/firestore) binding that makes it straightforward to always keep your local data in sync with remotes databases.

```tsx

import { Match, Switch, createMemo, createSignal } from 'solid-js'

import { collection, getFirestore, limit, orderBy } from 'firebase/firestore'

import { useFirebaseApp, useFirestore } from 'solid-firebase'

function App() {

  const app = useFirebaseApp()

  const db = getFirestore(app)

  const todos = useFirestore(collection(db, 'todos'))

  // or for doc reference

  const todo = useFirestore(doc(db, 'todos', 'todo-id'))

  // you can also use an accessor for reactive query

  const [postsLimit] = createSignal(10)

  const postsQuery = createMemo(() => query(

    collection(db, 'posts'),

    orderBy('createdAt', 'desc'),

    limit(postsLimit())

  ))

  const posts = useFirestore(postsQuery)

  return (

    

      

        
Loading...

      

      

        
An error occurred.

      

      

        

      

    

  )

}

```


### Realtime Database

[useDatabase](https://github.com/wobsoriano/solid-firebase/blob/master/packages/lib/src/hooks/useDatabase.tsx) is a [Realtime Database](https://firebase.google.com/docs/database) binding that makes it straightforward to always keep your local data in sync with remotes databases.

```tsx

import { Match, Switch } from 'solid-js'

import { getDatabase, ref } from 'firebase/database'

import { useDatabase, useFirebaseApp } from 'solid-firebase'

function App() {

  const app = useFirebaseApp()

  const db = getDatabase(app)

  const todos = useDatabase(ref(db, 'todos'))

  return (

    

      

        
Loading...

      

      

        
An error occurred.

      

      

        

      

    

  )

}

```


### Cloud Storage

[useDownloadURL](https://github.com/wobsoriano/solid-firebase/blob/master/packages/lib/src/hooks/useDownloadURL.tsx) is a hook that wraps the [getDownloadURL](https://firebase.google.com/docs/storage/web/download-files#download_data_via_url) method of [Cloud Storage](https://firebase.google.com/docs/storage).

```tsx

import { Match, Switch } from 'solid-js'

import { getStorage, ref } from 'firebase/storage'

import { useDownloadURL, useFirebaseApp } from 'solid-firebase'

function App() {

  const app = useFirebaseApp()

  const storage = getStorage(app)

  const data = useDownloadURL(ref(

    storage,

    'images/yourimage.jpg',

  ))

  // or with an accessor

  const [location] = createSignal('images/yourimage.jpg')

  const downloadRef = createMemo(() => ref(storage, location()))

  const data = useDownloadURL(downloadRef)

  return (

    

      

        
Download URL: Loading...

      

      

        
Error: {data.error?.name}

      

      

        

      

    

  )

}

```


## License

MIT