#FireAct A Firebase JSX Component

##Install npm i --save fireact Note: It is not published yet to the NPM registry

###Usage DO NOT USE :) This is a Proof of Concept and I'm still experimenting on the API itself. Expect some breaking changes. Any suggestions are welcome, ping me @ the Firebase Slack (reactjs channel). My handle there is florian. ####Props

const eventTypes = [ 'value', 'child_added', 'child_changed', 'child_removed', 'child_moved'];

FireAct.defaultProps = {
  eventType: 'value'
}

FireAct.propTypes = {
  bindTo: PropTypes.any,
  children: PropTypes.element,
  endAt: PropTypes.any,
  equalTo: PropTypes.any,
  eventType: PropTypes.oneOf(eventTypes).isRequired,
  limitToFirst: PropTypes.number,
  limitToLast: PropTypes.number,
  once: PropTypes.bool,
  onDataChange: PropTypes.func,
  orderByChild: PropTypes.string,
  orderByKey: PropTypes.bool,
  orderByValue: PropTypes.bool,
  orderByPriority: PropTypes.bool,
  push: PropTypes.bool,
  startAt: PropTypes.any,
  url: PropTypes.string.isRequired
}

On [➤]

Listen for data changes at a particular location.

import React from 'react';
import FireAct from 'fireact';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    }
  }

  dataChangeHandler(data) {
    //Code to handle data change (update the state for example).
  }

  render() {
    return (
      <FireAct
        onDataChange={this.dataChangeHandler.bind(this)}
        url="https://dinosaur-facts.firebaseio.com/dinosaurs"
      />
    );
  }
}

By default, FireAct listens to value events. You can use the evenType Prop to listens to other events ([ 'value', 'child_added', 'child_changed', 'child_removed', 'child_moved'])

Once [➤]

Listens for exactly one event of the specified event type, and then stops listening

<FireAct
    once
    onDataChange={this.dataChangeHandler.bind(this)}
    url="https://dinosaur-facts.firebaseio.com/dinosaurs"
  />

OrderByChild [➤]

Generates a new Query object ordered by the specified child key.

<FireAct
    onDataChange={this.dataChangeHandler.bind(this)}
    orderByChild="height"
    url="https://dinosaur-facts.firebaseio.com/dinosaurs"
  />

OrderByKey [➤]

Generates a new Query object ordered by key.

<FireAct
    onDataChange={this.dataChangeHandler.bind(this)}
    orderByKey
    url="https://dinosaur-facts.firebaseio.com/dinosaurs"
  />

orderByValue [➤]

Generates a new Query object ordered by key.

<FireAct
    onDataChange={this.dataChangeHandler.bind(this)}
    orderByValue
    url="https://dinosaur-facts.firebaseio.com/dinosaurs"
  />

orderByPriority [➤]

Generates a new Query object ordered by key.

<FireAct
    onDataChange={this.dataChangeHandler.bind(this)}
    orderByPriority
    url="https://dinosaur-facts.firebaseio.com/dinosaurs"
  />

startAt [➤]

Creates a Query with the specified starting point. The generated Query includes children which match the specified starting point.

<FireAct
    onDataChange={this.dataChangeHandler.bind(this)}
    orderByChild="height"
    startAt={3}
    url="https://dinosaur-facts.firebaseio.com/dinosaurs"
  />

endAt [➤]

Creates a Query with the specified ending point. The generated Query includes children which match the specified ending point.

<FireAct
    endat="pterodactyl"
    onDataChange={this.dataChangeHandler.bind(this)}
    orderByKey
    url="https://dinosaur-facts.firebaseio.com/dinosaurs"
  />

equalTo [➤]

Creates a Query which includes children which match the specified value.

<FireAct
    equalTo={25}
    onDataChange={this.dataChangeHandler.bind(this)}
    orderByChild="height"
    url="https://dinosaur-facts.firebaseio.com/dinosaurs"
  />

limitToFirst [➤]

Generates a new Query object limited to the first certain number of children.

<FireAct
    limitToFirst={2}
    onDataChange={this.dataChangeHandler.bind(this)}
    orderByChild="height"
    url="https://dinosaur-facts.firebaseio.com/dinosaurs"
  />

limitToLast [➤]

Generates a new Query object limited to the last certain number of children.

<FireAct
    limitToLast={2}
    onDataChange={this.dataChangeHandler.bind(this)}
    orderByChild="weight"
    url="https://dinosaur-facts.firebaseio.com/dinosaurs"
  />

Writing Data

In order to write data use the bindTo prop. Any time the data passed to bindTo changes, it will be updated on firebase.

render(){
  let data = {
    user: 'Homer',
    message: 'I love Pork Chops'
  }
  return (
    <FireAct
        bindTo={data}
        url="https://fireact.firebaseio.com/someId"
      />
  );
}

If you want to push the data in a new child location with a unique key, add the push prop [➤]

render(){
  let data = {
    user: 'Homer',
    message: 'I love Pork Chops'
  }
  return (
    <FireAct
        bindTo={data}
        push
        url="https://fireact.firebaseio.com/dinosaurs"
      />
  );
}

'2 Way binding'

You can achieve two way binding by using both the bindTo and the onChangeData props :

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        user: 'Homer',
        message: 'I love Pork Chops'
      }
    }
  }

  dataChangeHandler(data) {
    this.setState({
      data: data
    });
  }

  render() {
    return (
      <FireAct
        bindTo={this.state.data}
        onDataChange={this.dataChangeHandler.bind(this)}
        url="https://dinosaur-facts.firebaseio.com/dinosaurs"
      />
    );
  }
}

That's all for now !