Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hoppula/react-firebase-web
React Firebase components with render props
https://github.com/hoppula/react-firebase-web
firebase react react-firebase render-props
Last synced: 19 days ago
JSON representation
React Firebase components with render props
- Host: GitHub
- URL: https://github.com/hoppula/react-firebase-web
- Owner: hoppula
- Created: 2019-02-14T13:54:20.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-11T21:56:51.000Z (almost 3 years ago)
- Last Synced: 2024-10-13T13:22:38.522Z (about 1 month ago)
- Topics: firebase, react, react-firebase, render-props
- Language: TypeScript
- Homepage:
- Size: 244 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-firebase-web ☢️🔥🕸
> React Firebase components with render props
`react-firebase-web` provides useful set of React components with easy-to-use APIs to access most of Firebase's features.
## Installation
### Using npm
```
npm install -S react-firebase-web
```
### Using yarn
```
yarn add react-firebase-web
```
## Usage
```javascript
{admin =>
{admin.name}}
ref.orderByKey().limitToLast(10)}>
{last10Posts => (
- {post.title}
{last10Posts.map(({ key, value: post }) => (
))}
)}
{
return user.uid ?
}}
/>
{pushToUsers => }
```
## CodeSandbox examples
These CodeSandbox examples use `firebase-mock`, so feel free to mess around as any change is only applied locally and reseted after reload.
- [Connected, shows Firebase connection status](https://codesandbox.io/embed/8zy4z1p8p0)
- [Value, shows how to read and update single value](https://codesandbox.io/embed/91954r1x2r)
- [Todos, shows to how to read and update list of values](https://codesandbox.io/embed/8kjp7n7pl2)
- [Populate, shows how to populate related data given a list of ids](https://codesandbox.io/embed/r0zj7pq61o)
- [Login and logout, shows how to login with email & OAuth, how to log out and how to show currently logged-in user](https://codesandbox.io/embed/7j646y17pj)
## Components
### Firebase
<Firebase/> places Firebase instance to React's context, so all the other components can access it. You should wrap your app inside <Firebase/> component.
#### Usage
```javascript
```
### Connected
<Connected/> provides the current Firebase connection status as only argument for `children` render function.
#### Usage
```javascript
(connected ? "Online" : "Offline")} />
```
### List
<List/> provides given Firebase `path` as an array for given `children` render function. All array items have `key` and `value` properties. List gets re-rendered whenever there are updates to referred Firebase data.
You can provide `once` prop if you do not want realtime updates.
There's also `query` prop for limiting results, it accepts a function that gets called with Firebase reference, e.g. `ref => ref.orderByKey().limitToLast(10)`
#### Usage
```javascript
(
- {item.name}
{list.map(({ key, value: item }) => (
))}
)}
/>
```
### Value
<Value/> provides value of given Firebase `path` as an object for given `children` render function. Value gets re-rendered whenever there are updates to referred Firebase data.
You can provide `once` prop if you do not want realtime updates.
#### Usage
```javascript
```
### Populate
<Populate/> takes `from` prop (object with shape `{key1: true, key2: true, ...}`) and populates an array of related objects using `with` prop (function with key, `` key => `relatedPath/${key}` ``) for given `children` render function.
All array items have `key` and `value` properties. Populate gets re-rendered whenever there are updates to referred Firebase data.
#### Usage
```javascript
`articles/${articledId}`}
children={articles => (
- {article.title}
{articles.map(({ key, value: article }) => (
))}
)}
/>
```
### User
<User/> component renders given `children` render function with currently logged in user. Render function will receive an empty object when user is not logged in.
#### Usage
```javascript
{
if (user.uid) {
return
} else {
return
}
}}
/>
```
### OAuthLogin
<OAuthLogin/> renders given `children` render function with `login` function, which can be passed to `onClick` handler for example.
`flow` prop accepts `popup` and `redirect` as authentication flows.
`provider` props accepts `facebook`, `github`, `google` and `twitter` as OAuth providers.
#### Usage
```javascript
Login with Google}
/>
```
### Logout
<Logout/> provides `logout` function for given `children` render function, it can then be passed to event handlers, e.g. `onClick`.
#### Usage
```javascript
Logout} />
```
### Write
<Write/> provides mutator function for given `children` render function.
`method` prop accepts `push`, `set`, `update` and `transaction`.
`to` prop accepts path to mutate as a string.
#### Usage
```javascript
{
return (
pushToPosts({ title: "Test" })}>
Push to posts
)
}}
/>
```
### EmailLogin
<EmailLogin/> logs user in using Firebase Auth's `signInWithEmailAndPassword` method.
Given `children` render function receives single parameter, a function that logs user in.
That function accepts `email` and `password` as params and returns a `Promise`.
#### Usage
```javascript
(
login("[email protected]", "password")}>Login
)}
/>
```
### Registration
<Registration/> registers new user using Firebase Auth's `createUserWithEmailAndPassword` method.
Given `children` render function receives single parameter, a function that creates new user.
That function accepts `email` and `password` as params and returns a `Promise`.
#### Usage
```javascript
(
register("[email protected]", "test")}>
Create user
)}
/>
```
### ResetPassword
<ResetPassword/> sends password reset e-mail using Firebase Auth's `sendPasswordResetEmail` method.
Given `children` render function receives single parameter, a function that sends password reset e-mail.
That function accepts `email` as a param and returns a `Promise`.
#### Usage
```javascript
(
sendResetEmail("[email protected]")}>
Send reset password e-mail
)}
/>
```
### Upload
<Upload/> is a component that uploads files to Firebase storage.
`onUpload` prop function is called when upload completes. It receives upload snapshot and rootRef, so you can store references to uploaded files to some other location in your Firebase database.
```javascript
onComplete = (snapshot, rootRef) => {
rootRef
.child(`users/${this.props.user.uid}/uploads`)
.push(snapshot.downloadURL)
}
```
`path` prop defines where uploaded files should be stored.
`children` render function receives an object with:
- `uploadFiles` a function that uploads the provided files, can be used directly as `react-dropzone`'s `onDrop` callback prop.
- `uploads` array of user's uploaded files.
The example below uses `react-dropzone`.
**NOTE:** Remember to enable Firebase storage in your Firebase control panel before using Upload component.
#### Usage
```javascript
{
return (
{uploads.map(upload => {
const { snapshot, error, success } = upload
if (error) {
return
}
if (success) {
return
}
return
})}
)
}}
/>
```
### Download
<Download/> allows you to get download url for provided Firebase Storage reference. Given `children` render function receives an object with `url` property.
If you set `metadata` prop as true, provided object will also include `metadata` object, which includes file metadata, such as `contentType`.
#### Usage
```javascript
{download => (
)}
```
## React Hooks
This project will be likely rewritten using [hooks](https://reactjs.org/docs/hooks-intro.html) soon, but it will still provide current render prop components as an alternative.
## Firestore
Firestore support is in progress, no ETA yet.
## License
MIT