Sync react inputs and forms with firebase realtime database
npm install react-firebase-input> Sync inputs and forms from React to your Firebase realtime database
 
On component mount, the values from your Firebase realtime database will set on your FirebaseInput components in react. As the user changes the input values they will update the values in the database.
!text input
✅ Supports Forms
If you want multiple inputs to submit simultaneously, wrap your inputs with the FirebaseForm component.
!new form
See more examples and experiment with your own database:
Live Example
bash
npm install --save react-firebase-input
`yarn
`bash
yarn add react-firebase-input
`Usage
#### Inputs
- FirebaseInput props
- dbRef: reference to firebase realtime database
- refKey: specific key in the reference object
- callback (optional): function that is called with the error result, or no params on success
`jsx
import React from 'react'
import firebaseDbInstance from '../your-project'
import { FirebaseInput }from 'react-firebase-input'const Example = () => {
const dbRef = firebaseDbInstance.ref('/school')
return (
dbRef={dbRef}
refKey="name"
type="text"
/>
)
}
`Supports the following types:
- text
- textarea
- radio
- checkbox
- number
- range
- password
- email
- tel
#### Forms
- FirebaseForm props
- dbRef: reference to firebase realtime database
- newRecord (optional): boolean, if true, will create a new record under the provided reference
- callback (optional): function called with error result, or the key of the new object created
- If you pass an onSubmit prop to the Form, it will over-ride most of this component's functionality
- FirebaseForm children input props
- refkey: key in the database object
- value: value of the key in the database object
`jsx
import React, { useState } from 'react'
import firebaseDbInstance from '../your-project'
import { FirebaseForm }from 'react-firebase-input'const Example = () => {
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const dbRef = firebaseDbInstance.ref('/user')
return (
Example Form
Name
setName(e.target.value)} value={name} refkey="name" />
Email
{/ State doesn't have to be controlled by React/}
Also supports nested inputs
)
}
`Development
1. Clone the git repo
2. cd react-firebase-input
3. npm start
4. Open a new terminal or tab
5. cd react-firebase-input/example
6. npm start`MIT © reidjs