JavaScript re-base createClass Examples

Example #1

File: FirebaseAdapter.js Project: tecla5/chat

 // TODO: connect to base
 constructor(options = {}) {
   super();
   
   // TODO: Firebase url should be loaded from a config file or ENV variable
   options.url = options.url || 'https://t5-chat.firebaseio.com';
       
   this.endpoint = options.endpoint;   
   this.asArray = options.array || options.asArray;    
   this.base = Rebase.createClass(options.url);  
 }

Example #2

File: FirebaseContainer.js Project: JonathanBergers/dewildeApp

  constructor(props){
    super(props)
    var base = Rebase.createClass(props.base_url)
    var store_name = props.table_name
    var as_array = true
    if(props.store_name != undefined){
      store_name = props.store_name
    }
    if(props.as_array != undefined){
      as_array = props.as_array
    }
    this.state = {base : base, table_name: props.table_name, store_name: store_name, as_array: as_array}

  }

Example #3

File: SettingsComponent.js Project: UkiMiawz/fungi-droid

    View,
    Modal,
    TouchableNativeFeedback,
    TextInput,
    ScrollView,
} from 'react-native';
import Rebase from 're-base';
import moment from 'moment';
import tz from 'moment-timezone';

import * as GLOBAL from './Globals';

/* Component to change thresholds parameters for the sensors value */

//firebase client
var base = Rebase.createClass(GLOBAL.FIREBASE.URL);

var timestampText = moment().unix();
var timeText = moment().tz(GLOBAL.TIMEZONE.LOCAL_TIMEZONE).format(GLOBAL.TIMEZONE.DATE_FORMAT);

class SettingsComponent extends Component {

    //set default value otherwise its null value error
    constructor(props){
        super(props);
        this.state = {
            parameters: [],
            loading: true,
            modalVisible: false,
            lux_min: 0,
            lux_max: 0,

Example #4

File: App.js Project: smongey/lr

import React from 'react';
import Catalyst from 'react-catalyst';
import Rebase from 're-base';
var base = Rebase.createClass('https://smcotd.firebaseio.com/');

import Header from './Header';
import Order from './Order';
import Inventory from './Inventory';
import Fish from './Fish';

/* App */
var App = React.createClass({
	mixins : [Catalyst.LinkedStateMixin],
	getInitialState: function() {
		return {
			fishes : {},
			order : {}
		}
	},
	componentDidMount: function() {
		base.syncState(this.props.params.storeId + '/fishes', {
			context : this,
			state : 'fishes'
		});

		var localStorageRef = localStorage.getItem('order-' + this.props.params.storeId);
		if (localStorageRef) {
			this.setState({
				order : JSON.parse(localStorageRef)
			});
		}

Example #5

File: Profile.js Project: stjanis/github-notetaker

import React, {Component} from 'react';
import Repos from './Github/Repos';
import UserProfile from './Github/UserProfile';
import Notes from './Notes/Notes';
import helpers from '../utils/helpers';
import Rebase from 're-base';

// first we need to define base URL for Rebase
const base = Rebase.createClass({
  apiKey: "",
  authDomain: "",
  databaseURL: 'https://github-note-taker.firebaseio.com/',
  storageBucket: ""
});
// this will return bunch of methods for better
// interfacing with firebase

class Profile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      notes: [1, 2, 3],
      bio: {},
      repos: []
    };
  }

  // componentDidMount will be called right after component is mounted
  // here we can do all out ajax requests, firebase.. etc
  // so when component mounts the below callback will be called
  componentDidMount() {

Example #6

File: profile.js Project: njoshi22/react-demo

import React from 'react';
import Router from 'react-router';
import Firebase from 'firebase';
import Rebase from 're-base';

import Repos from './github/repos';
import UserProfile from './github/userProfile';
import Notes from './notes/notes';
import getGithubInfo from '../utils/helpers';

const base = Rebase.createClass('https://nj-react.firebaseio.com/');

class Profile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      notes: [],
      bio: {},
      repos: []
    }
  }
  componentDidMount() {
    this.init(this.props.params.username);
  }
  init(username) {

    this.ref = base.bindToState(username, {
      context: this,
      asArray: true,
      state: 'notes'
    });

Example #7

File: Profile.js Project: vbehl/github-notetaker

import React from 'react';
import UserProfile from './Github/UserProfile';
import Repos from './Github/Repos';
import Notes from './Notes/Notes';
import ReactFireMixin from 'reactfire';
import Rebase from 're-base';
import getInfo from '../utils/helper';

const base = Rebase.createClass('https://vb-github-notetaker.firebaseio.com/');

class Profile extends React.Component{
  constructor(props){
      super(props);
      this.state = {
          notes: [],
          bio: {},
          repos:[]
      }
  }

  componentDidMount(){
    this.init(this.props.params.username);
}
  componentWillUnmount(){
      base.removeBinding(this.ref);
}
  componentWillReceiveProps(nextProps){
      base.removeBinding(this.ref);
      this.init(nextProps.params.username);
  }
  init(username){

Example #8

File: Store.js Project: react-beer/the-beer-store-react-es6-firebase-oauth

import React from 'react';
import { browserHistory } from 'react-router';
import autoBind from 'react-autobind';
import { Grid } from 'react-bootstrap';
import Header from './Header';
import Cart from './Cart';
import Products from './Products';
import Footer from './Footer';

// Firebase
import Rebase from 're-base';
const base = Rebase.createClass('https://the-beer-store.firebaseio.com/');

class Store extends React.Component {
  constructor(props) {
    super(props);

    let { location } = this.props;

    this.state = {
      uid: location.state ? location.state.uid : null,
      beers: {},
      cart: {}
    };

    autoBind(this, 'addToCart', 'removeFromCart');
  }

  componentWillMount() {
    if (this.state.uid === this.props.params.userId) {
      this.ref = base.syncState(this.props.params.userId + '/cart', {

Example #9

File: Profile.js Project: ashelley/egghead-building-a-react-js-app

import React from 'react'
import Repos from './Github/Repos'
import UserProfile from './Github/UserProfile'
import Notes from './Notes/Notes'
import getGithubInfo from '../utils/helpers'
import Rebase from 're-base'
import config from 'config'

const base = Rebase.createClass(config.firebaseUrl)

export default class Profile extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			notes: [1,2,3],
			bio: {
				name: "Adam Shelley"
			},
			repos: ['a','b','c']
		}
	}
	componentDidMount() {
		this.init(this.props.params.username)
	}
	componentWillUnmount() {
		base.removeBinding(this.ref)
	}
	componentWillReceiveProps(nextProps) {
		base.removeBinding(this.ref)
		this.init(nextProps.params.username)
	}

Example #10

File: base.js Project: arundavidp/html5-p1

import Rebase from 're-base';

const base = Rebase.createClass({
  apiKey: "AIzaSyC5DiGgFvIJzwZlAxdjytllBBwcWRe3xmc",
authDomain: "catch-of-the-day-adp.firebaseapp.com",
databaseURL: "https://catch-of-the-day-adp.firebaseio.com",
});

export default base;

Example #11

File: main.js Project: MattRooney/catch-of-the-day

var React    = require('react');
var ReactDOM = require('react-dom');

var ReactRouter = require('react-router');
var Router      = ReactRouter.Router;
var Route       = ReactRouter.Route;
var Navigation  = ReactRouter.Navigation;
var History     = ReactRouter.History;
var createBrowserHistory = require('history/lib/createBrowserHistory');

var h = require('./helpers')

// Firebase
  var Rebase = require('re-base');
  var base = Rebase.createClass('https://rooney-catch.firebaseio.com/');

// App
var App = React.createClass({
  getInitialState : function(){
    return {
      fishes: {},
      order: {},
    }
  },
  componentDidMount : function() {
    // syncing the app with firebase - takes path &
    base.syncState(this.props.params.storeId + '/fishes', {
      context: this,
      state: 'fishes'
    });
    // restore Order

Example #12

File: Clientes.js Project: andrejunges/kbs-rotulos

import {browserHistory} from 'react-router'
//Internal Componentes
import KBSRaisedButton from './KBSRaisedButton'
import DialogCliente from './dialogs/DialogCliente'
import Cliente from './Cliente'
import PageHeader from './PageHeader'
//import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import FontIcon from 'material-ui/FontIcon';
//Theme
import materialBaseTheme from '../utils/materialTheme'
import getMuiTheme from 'material-ui/styles/getMuiTheme';
const materialTheme = getMuiTheme(materialBaseTheme)
//Others
import Rebase from 're-base'
const base = Rebase.createClass('https://kbsrotulos.firebaseio.com');

export default class Clientes extends Component {

    constructor(props) {
        super(props);

        this.state = {
            isDialogClienteOpen: false,
            clientes: [],
            cliente: {}
        }
    }

    componentDidMount(){
        this.ref = base.syncState('clientes', {

Example #13

File: GroupPostings.js Project: waffle-iron/warframeLFG

import React from 'react';
import PostFormModal from '../PostFormModal/PostFormModal';
import GroupPostingsToolbar from './GroupPostingsToolbar/GroupPostingsToolbar';
import List from 'material-ui/List';
import Divider from 'material-ui/Divider';
import GroupPost from './GroupPost/GroupPost';
import styles from './GroupPostings.scss';

import Rebase from 're-base';
const base = Rebase.createClass('https://vivid-fire-8661.firebaseio.com/');

import _ from 'underscore';


class GroupPostings extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      appData: props.appData,
      postFormOpen: false,
      posts: []
    };
  }

  componentDidMount(){
    this.ref = base.syncState('postings', {
      context: this,
      state: 'posts',
      asArray: true,
      queries: {
        orderByChild: 'createdOn',

Example #14

File: login.js Project: andbet39/reactChat

import React from 'react'
import Rebase from 're-base';

import { browserHistory } from 'react-router'

const base = Rebase.createClass('https://crackling-inferno-4390.firebaseio.com/');

class Login extends React.Component
{

  onSubmit(){

    const email = this.emailref.value
    const password = this.passowrdref.value

    base.authWithPassword({
      email: email,
      password: password
    }, (error,authData)=>{
      if (error) {
            console.error("Login Failed!", error);
            } else {
              console.log("Authenticated successfully with payload:", authData);
              browserHistory.push('/');

            }
        }
      );
  }

  render(){

Example #15

File: Profile.js Project: shellyser/reactproject

import React from 'react';
import Repos from './Github/Repos';
import UserProfile from './Github/UserProfile';
import Notes from './Notes/Notes';
import getGithubInfo from '../utils/helpers';
import Rebase from 're-base';

const base = Rebase.createClass('https://reactnotetakerproj.firebaseio.com/')

class Profile extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      notes: [],
      bio: {},
      repos: []
    }
  }
  componentDidMount(){
    this.init(this.props.params.username);
  }
  componentWillReceiveProps(nextProps){
    base.removeBinding(this.ref);
  	this.init(nextProps.params.username);

  }
  componentWillUnmount(){
    base.removeBinding(this.ref)
  }
  init(username){
  	this.ref = base.bindToState(username, {

Example #16

File: App.js Project: t-murano/Quicker

import React, { Component, PropTypes } from 'react'
import Rebase from 're-base'

import auth from './config/auth'
import user from './config/user'
import Footer from './layout/Footer'

const base = Rebase.createClass('https://quicker-dev.firebaseio.com')

export default class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      loggedIn: auth.loggedIn(),
      user: {},
      messages: [],
      isRoom: false
    }
  }

  _updateAuth (loggedIn, user) {
    this.setState({
      loggedIn: !!loggedIn,
      user: user
    })
  }

  /**
   * Mounting: Before rendering (no DOM yet)
   * Invoked once, immediately before the initial rendering occurs.
   */

Example #17

File: Profile.js Project: leolassence/ReactApp-Search-Profile-In-GitHub

import React from 'react'
import Repos from './Github/Repos';
import UserProfile from './Github/UserProfile';
import Notes from './Notes/Notes';
import getGithubInfo from '../utils/helpers';
import Rebase from 're-base';

const base = Rebase.createClass('https://react-app-leo.firebaseio.com/');

class Profile extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      notes: [],
      bio: {},
      repos: []
    };
  }
  // first call to Profile init props
  componentDidMount(){
    this.init(this.props.params.username);
  }
  // second or more Profile components datas
  componentWillReceiveProps(nextProps){
    base.removeBinding(this.ref);
    this.init(nextProps.params.username);
  }

  componentWillUnmount(){
    base.removeBinding(this.ref);
    // this.unbind('notes');

Example #18

File: Profile.js Project: denlinsley/github-notetaker-react

import React from 'react'
import Repos from './Github/Repos'
import UserProfile from './Github/UserProfile'
import Notes from './Notes/Notes'
import getGithubInfo from '../utils/helpers'
import Rebase from 're-base'

// cannot not mixins (reactfire) use ES6 class syntax - use re-base instead
const base = Rebase.createClass('https://gh-note-taker-eh.firebaseio.com/')

class Profile extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      notes: [],
      bio: {},
      repos: []
    }
  }

  componentDidMount() {
    this.init(this.props.params.username)
  }

  componentWillReceiveProps(nextProps) {
    base.removeBinding(this.ref)
    this.init(nextProps.params.username)
  }

  componentWillUnmount() {
    base.removeBinding(this.ref)

Example #19

File: TagSidebarContainer.js Project: dggriffin/noteworthee

import React from 'react';
import Rebase from 're-base';
import TagSidebar from 'components/TagSidebar';

const base = Rebase.createClass('https://noteworthyapp.firebaseio.com');

class TagSidebarContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    };
  }

  componentDidMount() {
    this.mountTagList(this.props.teamName, this.props.boardName);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.teamName !== this.props.teamName) {
      base.removeBinding(this.ref);
      this.mountBoardList(nextProps.teamName);
    }
  }

  mountTagList(teamName, boardName) {
    this.ref = base.syncState(`tags/${teamName}/${boardName}`, {
      context: this,
      state: 'tagList',
      asArray: true,
      then() {

Example #20

File: api.js Project: damonbauer/scorekeeper

import Rebase from 're-base';
import shortid from 'shortid';

export const Base = Rebase.createClass({
  apiKey: 'AIzaSyDmDJQ43yg-cuDQ-KVgkm1EkdcTjJvO_r4',
  authDomain: 'scorekeeper-6533d.firebaseapp.com',
  databaseURL: 'https://scorekeeper-6533d.firebaseio.com',
  storageBucket: 'scorekeeper-6533d.appspot.com'
});

export function shortId() {
  return shortid.generate();
}

Example #21

File: rebase.js Project: DaDataDudes/HOME

import Rebase from 're-base';
import { FIREBASE_URL } from 'config';

const base = Rebase.createClass(FIREBASE_URL);

export default base;

Example #22

File: App.js Project: Eric-Alexander/GitHub_user_search_notetaker

import React from 'react';
import Container from './components/Container';
import NewChat from './components/NewChat';

import Rebase from 're-base';
var base = Rebase.createClass('https://jt-ts.firebaseio.com/rebase-chat');

class Main extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      messages: []
    };
  }
  componentWillMount(){
  /*
   * Here we call 'bindToState', which will update
   * our local 'messages' state whenever our 'chats'
   * Firebase endpoint changes.
   */
    base.bindToState('chats', {
      context: this,
      state: 'messages',
      asArray: true
    });
  }
  render(){
    return (
      <div style={ { paddingTop: '30px' } }>
        <NewChat chats={ this.state.messages } />
        <Container />

Example #23

File: Profile.js Project: MickeyJ/react-search-github

import React from 'react'
import Router from 'react-router'
import Rebase, { createClass } from 're-base'

import getGithubInfo from '../api/gitAPI'

import UserProfile from './Github/UserProfile'
import Repos from './Github/Repos'
import Notes from './Notes/Notes'

const base = createClass('https://github-note-taker.firebaseio.com/');

export default class Profile extends React.Component{
  constructor(props){
    super(props);
    this.state = { notes: [], bio: {}, repos: [] }
  }
  componentDidMount(){
    this.init(this.props.params.username)
  }
  componentWillReceiveProps(nextProps){
    this.init(nextProps.params.username);
  }
  componentWillUnmount(){
    base.removeBinding(this.ref)
  }
  init(username){
    this.ref = base.bindToState(username, {
      context: this,
      asArray: true,
      state: 'notes'

Example #24

File: SignUp.js Project: rosiebear/firebasefundamentals

import React from 'react';
import Rebase from 're-base';
import Divider from 'material-ui/lib/divider';
import Paper from 'material-ui/lib/paper';
import TextField from 'material-ui/lib/text-field';
import RaisedButton from 'material-ui/lib/raised-button';
import FlatButton from 'material-ui/lib/flat-button';
import FontIcon from 'material-ui/lib/font-icon';

const base = Rebase.createClass('https://fundamental.firebaseio.com');

const style = {
    paper: {
        height: 400,
        width: 300,
        marginTop: 50,
        marginLeft: 'auto',
        marginRight: 'auto',
        marginBottom: 100,
        textAlign: 'left',
        fontFamily: 'Roboto',
        padding: 20,
        paddingTop: 3
    },
    button: {
        width: '100%',
        textAlign: 'center'
    },
    divider: {
        marginTop: 20,
        marginBottom: 20

Example #25

File: Feed.js Project: Nfinger/Web

import React, { PropTypes as T } from 'react'
import {Button} from 'react-bootstrap'
import AuthService from 'utils/AuthService'
import styles from './styles.module.css'
import Rebase from 're-base'
import Posts from "./Post"
import Time from 'react-time'


const base = Rebase.createClass("https://gamersden-cd0d8.firebaseio.com/")




export class Feed extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        posts: []
      }
    }

  componentDidMount(){
    this.init()
  }
  componentWillReceiveProps(nextProps){
    base.removeBinding(this.ref);
    this.init();
  }
  componentWillUnmount(){
    base.removeBinding(this.ref);

Example #26

File: App.js Project: pjmodi/projects

import React from 'react';
import Catalyst from 'react-catalyst';

import Fish from './Fish';
import Header from './Header';
import Order from './Order';
import Inventory from './Inventory';

// Firebase
import Rebase from 're-base';
var base = Rebase.createClass('https://glaring-fire-8643.firebaseio.com/');

var App = React.createClass({
    mixins : [Catalyst.LinkedStateMixin],

    getInitialState : function() {
        return {
            fishes : {},
            order : {}
        }
    },

    componentDidMount : function() {
        base.syncState(this.props.params.storeId + '/fishes', {
            context : this,
            state : 'fishes'
        });

        var localStorageRef = localStorage.getItem('order-' + this.props.params.storeId);

        if(localStorageRef) {

Example #27

File: main.js Project: 311Griff/React-For-Beginners-Starter-Files

var React = require('react');
var ReactDOM = require('react-dom');
var CSSTransitionGroup = require('react-addons-css-transition-group');

var ReactRouter = require('react-router');
var Router  = ReactRouter.Router;
var Route = ReactRouter.Route;
var History = ReactRouter.History;
var createBrowserHistory = require('history/lib/createBrowserHistory');

var h = require('./helpers');

// Firebase
var Rebase = require('re-base');
var base = Rebase.createClass('https://catch-of-the-day.firebaseio.com/');

var Catalyst = require('react-catalyst');

/*
  App
*/

var App = React.createClass({
  mixins : [Catalyst.LinkedStateMixin],
  getInitialState : function() {
    return {
      fishes : {},
      order : {}
    }
  },
  componentDidMount : function() {

Example #28

File: base.js Project: backlineint/React-For-Beginners-Starter-Files

import Rebase from 're-base';

const base = Rebase.createClass({
  apiKey: "AIzaSyBsTk2b4S9eXcKO-qSnZpoGO8IaVBG2Jj0",
  authDomain: "catch-of-the-day-brian-perry.firebaseapp.com",
  databaseURL: "https://catch-of-the-day-brian-perry.firebaseio.com"
});

export default base;

Example #29

File: ListSongs.js Project: tantv/testReact

import React from 'react';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
import RefreshIndicator from 'material-ui/RefreshIndicator';
import TextField from 'material-ui/TextField';
import Toggle from 'material-ui/Toggle';

import Rebase from 're-base';
import Loader from '../components/Loader';

var base = Rebase.createClass('https://kdreact-e6f59.firebaseio.com');

export default class ListSongs extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      fixedHeader: true,
      selectable: true,
      multiSelectable: true,
      showCheckboxes: true,
      enableSelectAll: true,
      stripedRows: false,
      showRowHover: false,
      deselectOnClickaway: false,
      loading: true,
      songs: []
    };
  }

  componentDidMount() {
   base.syncState('/', {

Example #30

File: App.js Project: dogsGhost/ymn-chrome-app

import React, { Component } from 'react';
import Rebase from 're-base';
import Header from '../layouts/Header';
import AuthContainer from './AuthContainer';
import NoAuthContainer from './NoAuthContainer';
import { filterMatches, normalizeDateString } from '../utils';

let base = Rebase.createClass('https://ymn-react.firebaseio.com');

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      // session object from firebase
      session: false,
      // user items from firebase
      items: [],

      // ids of items in item list user has temporarily hidden
      hiddenItems: [],
      // name of new item via add-item form
      itemName: '',

      // value of date field in add-item form
      itemDate: '',
      // max date value for `itemDate`
      curDate: '',

      // email value for various fields in non-auth views
      email: '',
      // password value for various fields in non-auth views