https://github.com/ysuzuki19/react-firebase

Firebase SDK utility for React
https://github.com/ysuzuki19/react-firebase

Last synced: 2 days ago
JSON representation

Firebase SDK utility for React

• Host: GitHub
• URL: https://github.com/ysuzuki19/react-firebase
• Owner: ysuzuki19
• License: mit
• Created: 2022-05-05T08:44:40.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-11-19T00:10:47.000Z (about 1 month ago)
• Last Synced: 2024-12-17T19:03:09.596Z (10 days ago)
• Language: TypeScript
• Size: 2.08 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-firebase

[![npm](https://img.shields.io/npm/v/@ysuzuki19/react-firebase?label=%40ysuzuki19%2Freact-firebase)](https://www.npmjs.com/package/@ysuzuki19/react-firebase)

react hooks library for Firebase SDK.

# install

```bash

npm i firebase @ysuzuki19/react-firebase

```

# How to Use

## set Provider

```tsx

import { FirebaseProvider } from '@ysuzuki19/react-firebase';

import React from 'react';

import { createRoot } from 'react-dom/client';

import App from './App';

import reportWebVitals from './reportWebVitals';

// see https://firebase.google.com/docs/web/setup

export const firebaseConfig = {

  apiKey: '',

  authDomain: '',

  projectId: '',

  storageBucket: '',

  messagingSenderId: '',

  appId: '',

};

const container = document.getElementById('root');

const root = createRoot(container as HTMLElement);

root.render(

  

    

      

    

  

);

reportWebVitals();

```

## Use with hooks

After the set provider.

you can use `useFirebase()` in your react componend.

```tsx

function App() {

  const { auth, firestore } = useFirebase();

  /** your process */

  return 
hoge
;

}

```


Currently, `react-firebase` only support following modules.

| hook           | returned                          |

| -------------- | --------------------------------- |

| useFirebase()  | all supported modules(with named) |

| useApp()       | FirebaseApp                       |

| useAuth()      | Auth                              |

| useFirestore() | Firestore                         |

## Switch to emulator in dev (advanced)

```tsx

import { FirebaseProvider } from '@ysuzuki19/react-firebase';

import React from 'react';

import { createRoot } from 'react-dom/client';

import App from './App';

import reportWebVitals from './reportWebVitals';

export const firebaseConfig = {

  apiKey: '',

  authDomain: '',

  projectId: '',

  storageBucket: '',

  messagingSenderId: '',

  appId: '',

};

export const emulatorsConfig = {

  firestore: { host: 'localhost', port: 8080 },

  auth: { url: 'http://localhost:9099' },

};

const container = document.getElementById('root');

const root = createRoot(container as HTMLElement);

root.render(

  

    

      

    

  

);

reportWebVitals();

```

## License

MIT