Skip to content

Commit 0623d37

Browse files
author
jacobawenger
committed
Renamed bindTo* methods to bindAs*. Cleaned up demo page UI. Updated README. Updated todoApp example directory to support Firebase hosting.
1 parent 52a26aa commit 0623d37

File tree

12 files changed

+12775
-51
lines changed

12 files changed

+12775
-51
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎README.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
reactFire
1+
ReactFireMixin
22
=========
33

4-
reactFire is an officially supported [React](http://facebook.github.io/react/) mixin
4+
ReactFireMixin is an officially supported [ReactJS](http://facebook.github.io/react/) mixin
55
for [Firebase](http://www.firebase.com/). Firebase provides your React app with a
6-
persistent, real-time backend so you don't need servers to build your React app!
6+
persistent, realtime backend to effortlessly keep all of your clients in sync!
77

8-
Read our [blog post](http://www.firebase.com/blog/TODO) on using React with Firebase to get started!
8+
Read our [blog post](https://firebase.com/blog/2014-05-01-using-firebase-with-react.html) on using Firebase with React and check out our [live Todo app demo](https://reactfiretodoapp.firebaseapp.com/) to get started!
99

1010
API Reference
1111
-------------
12-
To add the reactFire mixin to your component, update the component's mixins property:
12+
To add the ReactFireMixin to your component, add the ReactFireMixin's JavaScript file to your project and then update the component's mixins property:
1313

1414
var ExampleComponent = React.createClass({
15-
mixins: [reactFireMixin],
15+
mixins: [ReactFireMixin],
1616
...
1717
});
1818

19-
###bindToArray(firebaseRef, bindVar)
19+
###bindAsArray(firebaseRef, bindVar)
2020

2121
Creates a binding between Firebase and the inputted bind variable as an array. The Firebase
2222
reference will be stored in this.firebaseRefs[bindVar].
2323

24-
this.bindToArray(new Firebase("https://<YOUR_FIREBASE>.firebaseio-demo.com/items/"), "items");
24+
this.bindAsArray(new Firebase("https://<YOUR_FIREBASE>/"), "items");
2525

26-
###bindToObject(firebaseRef, bindVar)
26+
###bindAsObject(firebaseRef, bindVar)
2727

2828
Creates a binding between Firebase and the inputted bind variable as an object. The Firebase
2929
reference will be stored in this.firebaseRefs[bindVar].
3030

31-
this.bindToObject(new Firebase("https://<YOUR_FIREBASE>.firebaseio-demo.com/items/"), "items");
31+
this.bindAsObject(new Firebase("https://<YOUR_FIREBASE>/"), "items");
3232

3333
###unbind(bindVar)
3434

@@ -40,4 +40,4 @@ with that Firebase reference.
4040

4141
License
4242
-------
43-
[MIT](http://firebase.mit-license.org).
43+
[MIT](http://firebase.mit-license.org)

‎reactFireMixin.js‎ renamed to ‎ReactFireMixin.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
var reactFireMixin = {
1+
var ReactFireMixin = {
22
/********************/
33
/* MIXIN LIFETIME */
44
/********************/
@@ -19,12 +19,12 @@ var reactFireMixin = {
1919
/* BINDING */
2020
/*************/
2121
/* Creates a binding between Firebase and the inputted bind variable as an array */
22-
bindToArray: function(firebaseRef, bindVar) {
22+
bindAsArray: function(firebaseRef, bindVar) {
2323
this._bind(firebaseRef, bindVar, true);
2424
},
2525

2626
/* Creates a binding between Firebase and the inputted bind variable as an object */
27-
bindToObject: function(firebaseRef, bindVar) {
27+
bindAsObject: function(firebaseRef, bindVar) {
2828
this._bind(firebaseRef, bindVar, false);
2929
},
3030

‎examples/todoApp/ReactFireMixin.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
var ReactFireMixin = {
2+
/********************/
3+
/* MIXIN LIFETIME */
4+
/********************/
5+
/* Initializes the Firebase binding refs array */
6+
componentWillMount: function() {
7+
this.firebaseRefs = {};
8+
},
9+
10+
/* Removes any remaining Firebase bindings */
11+
componentWillUnmount: function() {
12+
for (var key in this.firebaseRefs) {
13+
this.unbind(key);
14+
};
15+
},
16+
17+
18+
/*************/
19+
/* BINDING */
20+
/*************/
21+
/* Creates a binding between Firebase and the inputted bind variable as an array */
22+
bindAsArray: function(firebaseRef, bindVar) {
23+
this._bind(firebaseRef, bindVar, true);
24+
},
25+
26+
/* Creates a binding between Firebase and the inputted bind variable as an object */
27+
bindAsObject: function(firebaseRef, bindVar) {
28+
this._bind(firebaseRef, bindVar, false);
29+
},
30+
31+
/* Creates a binding between Firebase and the inputted bind variable as either an array or object */
32+
_bind: function(firebaseRef, bindVar, bindAsArray) {
33+
this.firebaseRefs[bindVar] = firebaseRef;
34+
firebaseRef.on("value", function(dataSnapshot) {
35+
var newState = {};
36+
if (bindAsArray) {
37+
newState[bindVar] = this._toArray(dataSnapshot.val());
38+
}
39+
else {
40+
newState[bindVar] = dataSnapshot.val();
41+
}
42+
this.setState(newState);
43+
}.bind(this));
44+
},
45+
46+
/* Removes the binding between Firebase and the inputted bind variable */
47+
unbind: function(bindVar) {
48+
this.firebaseRefs[bindVar].off("value");
49+
delete this.firebaseRefs[bindVar];
50+
},
51+
52+
53+
/*************/
54+
/* HELPERS */
55+
/*************/
56+
/* Returns true if the inputted object is a number */
57+
_isNumeric: function(obj) {
58+
try {
59+
return (((obj - 0) == obj) && (obj.length > 0));
60+
} catch (e) {
61+
return false;
62+
} // try
63+
}, // isNumeric()
64+
65+
/* Returns true if the inputted object is a JavaScript array */
66+
_isArray: function(obj) {
67+
if (!obj) { return false; }
68+
try {
69+
if (!(obj.propertyIsEnumerable("length"))
70+
&& (typeof obj === "object")
71+
&& (typeof obj.length === "number")) {
72+
for (var idx in obj) {
73+
if (!this._isNumeric(idx)) { return false; }
74+
} // for (var idx in object)
75+
return true;
76+
} else {
77+
return false;
78+
} // if (!(obj.propertyIsEnumerable("length"))...
79+
} catch (e) {
80+
return false;
81+
} // try
82+
}, // isArray()
83+
84+
/* Converts a Firebase list to a JavaScript array */
85+
_toArray: function(list) {
86+
var k, out = [];
87+
if (list) {
88+
if (this._isArray(list)) {
89+
out = list;
90+
}
91+
else if (typeof(list) === "object") {
92+
for (k in list) {
93+
if (list.hasOwnProperty(k)) {
94+
out.push(list[k]);
95+
}
96+
}
97+
}
98+
}
99+
return out;
100+
}
101+
};

‎examples/todoApp/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>reactFire Example</title>
5+
6+
<!-- React JS -->
7+
<!--<script src="https://fb.me/react-0.10.0.min.js"></script>
8+
<script src="https://fb.me/JSXTransformer-0.10.0.js"></script>-->
9+
<script src="react/react-0.10.0.min.js"></script>
10+
<script src="react/JSXTransformer-0.10.0.js"></script>
11+
12+
<!-- Firebase JS -->
13+
<script src="https://cdn.firebase.com/js/client/1.0.11/firebase.js"></script>
14+
15+
<!-- reactFire Mixin -->
16+
<script src="ReactFireMixin.js"></script>
17+
18+
<!-- Custom JS -->
19+
<script type="text/jsx" src="js/todoAppOriginal.js"></script>
20+
<script type="text/jsx" src="js/todoAppFirebaseExplicit.js"></script>
21+
<script type="text/jsx" src="js/todoAppFirebaseImplicit.js"></script>
22+
23+
<!-- Custom CSS -->
24+
<link rel="stylesheet" href="styles.css">
25+
</head>
26+
<body>
27+
28+
<div id="demoContainer">
29+
<h1>ReactFireMixin Demo</h1>
30+
<p>
31+
ReactFireMixin is a <a href="http://facebook.github.io/react/">ReactJS</a> mixin which allows for easy integration of <a href="http://www.firebase.com/">Firebase</a> into your React apps. See how this was made by reading the <a href="https://firebase.com/blog/2014-05-01-using-firebase-with-react.html">blog post</a> or checking out the <a href="https://github.com/firebase/reactFire">source code on GitHub</a>.
32+
</p>
33+
34+
<div class="todoAppContainer">
35+
<h2>Plain React</h2>
36+
<div id="todoApp1"></div>
37+
</div>
38+
39+
<div class="todoAppContainer">
40+
<h2>React + Plain Firebase</h2>
41+
<div id="todoApp2"></div>
42+
</div>
43+
44+
<div class="todoAppContainer">
45+
<h2>React + ReactFireMixin</h2>
46+
<div id="todoApp3"></div>
47+
</div>
48+
</div>
49+
</body>
50+
</html>

‎examples/todoApp/js/todoListFirebaseExplicit.js‎ renamed to ‎examples/todoApp/js/todoAppFirebaseExplicit.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ var TodoApp2 = React.createClass({
1515
},
1616

1717
componentWillMount: function() {
18-
this.firebaseRef = new Firebase("https://reactFireTodoList.firebaseio-demo.com/items/");
18+
this.firebaseRef = new Firebase("https://ReactFireTodoApp.firebaseio.com/items/");
1919
this.firebaseRef.on("child_added", function(dataSnapshot) {
2020
this.items.push(dataSnapshot.val());
2121
this.setState({
@@ -53,4 +53,4 @@ var TodoApp2 = React.createClass({
5353
}
5454
});
5555

56-
React.renderComponent(<TodoApp2 />, document.getElementById("todoList2"));
56+
React.renderComponent(<TodoApp2 />, document.getElementById("todoApp2"));

‎examples/todoApp/js/todoListFirebaseImplicit.js‎ renamed to ‎examples/todoApp/js/todoAppFirebaseImplicit.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ var TodoList3 = React.createClass({
99
});
1010

1111
var TodoApp3 = React.createClass({
12-
mixins: [reactFireMixin],
12+
mixins: [ReactFireMixin],
1313

1414
getInitialState: function() {
1515
return {items: [], text: ""};
1616
},
1717

1818
componentWillMount: function() {
19-
this.bindToArray(new Firebase("https://reactFireTodoList.firebaseio-demo.com/items/"), "items");
19+
this.bindAsArray(new Firebase("https://ReactFireTodoApp.firebaseio.com/items/"), "items");
2020
},
2121

2222
onChange: function(e) {
@@ -44,4 +44,4 @@ var TodoApp3 = React.createClass({
4444
}
4545
});
4646

47-
React.renderComponent(<TodoApp3 />, document.getElementById("todoList3"));
47+
React.renderComponent(<TodoApp3 />, document.getElementById("todoApp3"));

‎examples/todoApp/js/todoListOriginal.js‎ renamed to ‎examples/todoApp/js/todoAppOriginal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,4 @@ var TodoApp1 = React.createClass({
4141
}
4242
});
4343

44-
React.renderComponent(<TodoApp1 />, document.getElementById("todoList1"));
44+
React.renderComponent(<TodoApp1 />, document.getElementById("todoApp1"));

0 commit comments

Comments
 (0)