https://github.com/awran5/react-hooks-firebase-starter-project
https://github.com/awran5/react-hooks-firebase-starter-project
firebase firestore react-hooks reactjs starter-template usecontext
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/awran5/react-hooks-firebase-starter-project
- Owner: awran5
- License: mit
- Created: 2020-01-22T12:08:06.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-01-22T15:14:50.000Z (over 6 years ago)
- Last Synced: 2025-09-18T00:51:18.862Z (9 months ago)
- Topics: firebase, firestore, react-hooks, reactjs, starter-template, usecontext
- Language: JavaScript
- Size: 28.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## React Firebase Starter Project with hooks
This is a starter React-Firebase project using React [useContext[](https://reactjs.org/docs/hooks-reference.html#usecontext ) Hook that will build a React Context Provider/Consumer and initialize Firebase at the very top of your code and make it available anywhere in your project.
### Start - clone this repository
```java
git clone https://github.com/awran5/react-hooks-firebase-starter-project.git
```
### Install using Yarn
```java
yarn
```
### Install using npm
```java
npm install
```
### useSnapshots Usage example:
```js
import React from 'react'
import { useSnapshots } from './hooks/useFirebase'
function App() {
const { loading, data } = useSnapshots('collection name')
return (
{loading ? (
Loading...
) : (
data.map(({ id, title }) => {title})
)}
)
}
export default App
```
### Get a single DOC by its ID using useDocs example:
```js
import React from 'react'
import { useDocs } from './hooks/useFirebase'
function App() {
const { loading, data } = useDocs('collection name', doc id)
return (
...
...
)
}
export default App
```