React-firebase-input NPM

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

Install

npm

npm install --save react-firebase-input

yarn

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

import React from 'react'
import firebaseDbInstance from '../your-project'
import { FirebaseInput }from 'react-firebase-input'

const Example = () => {
  const dbRef = firebaseDbInstance.ref('/school')

  return (
    <FirebaseInput
      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

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 (
    <FirebaseForm dbRef={dbRef}>
      <div>Example Form</div>
      <div>Name</div>
      <input onChange={(e) => setName(e.target.value)} value={name} refkey="name" />
      <div>Email</div>
      {/* State doesn't have to be controlled by React*/}
      <input refkey="email" type="email" />
      <div>
        <div>Also supports nested inputs</div>
        <input refkey="agreeToTOS" type="checkbox"/>
      </div>
      <button>Submit</button>
    </FirebaseForm>
  )
}