v3.0.0-beta.3

* feat(types): add back type for `getFirebase` - #763
* feat(storage): pass file metadata through `uploadFile` to `storage.put` calls - #720
* feat(examples): update material and simple examples
* feat(docs): update docs with new hooks API

Author: prescottprue

.eslintrc.js

@@ -1,22 +1,17 @@
 module.exports = {
   root: true,
-
   parser: 'babel-eslint',
-
   extends: ['standard', 'standard-react', 'prettier', 'prettier/react'],
-  plugins: ['babel', 'react', 'prettier'],
-
+  plugins: ['babel', 'react', 'prettier', 'react-hooks'],
   settings: {
     react: {
       version: 'detect'
     }
   },
-
   env: {
     browser: true,
     es6: true
   },
-
   rules: {
     semi: [2, 'never'],
     'no-console': 'error',

README.md

@@ -56,8 +56,7 @@ import 'firebase/auth'
 // import 'firebase/firestore' // <- needed if using firestore
 // import 'firebase/functions' // <- needed if using httpsCallable
 import { createStore, combineReducers, compose } from 'redux'
-import ReactReduxFirebaseProvider from 'react-redux-firebase/lib/ReactReduxFirebaseProvider'
-import firebaseReducer from 'react-redux-firebase/lib/reducer'
+import { ReactReduxFirebaseProvider, firebaseReducer } from 'react-redux-firebase'
 // import { createFirestoreInstance, firestoreReducer } from 'redux-firestore' // <- needed if using firestore
 
 const fbConfig = {}
@@ -112,11 +111,16 @@ The Firebase instance can then be grabbed from context within your components (`
 
 ```jsx
 import React from 'react'
-import PropTypes from 'prop-types'
-import withFirebase from 'react-redux-firebase/lib/withFirebase'
-import { compose, withHandlers } from 'recompose'
+import { useFirebase } from 'react-redux-firebase'
+
+export default function Todos() {
+  const firebase = useFirebase()
+
+  function addSampleTodo() {
+    const sampleTodo = { text: 'Sample', done: false }
+    return firebase.push('todos', sampleTodo)
+  }
 
-function Todos({ firebase, addSampleTodo }) {
   return (
     <div>
       <h1>New Sample Todo</h1>
@@ -126,37 +130,31 @@ function Todos({ firebase, addSampleTodo }) {
     </div>
   )
 }
-
-const enhance = compose(
-  withFirebase,
-  withHandlers({
-    addSampleTodo: props => () => {
-      const sampleTodo = { text: 'Sample', done: false }
-      return props.firebase.push('todos', sampleTodo)
-    }
-  })
-)
-
-export default enhance(Todos)
 ```
 
 **Load Data (listeners automatically managed on mount/unmount)**
 
 ```jsx
 import React from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { compose } from 'redux'
-import firebaseConnect from 'react-redux-firebase/lib/firebaseConnect'
-import { isLoaded, isEmpty } from 'react-redux-firebase/lib/helpers'
+import { useSelector } from 'react-redux'
+import { useFirebaseConnect, isLoaded, isEmpty } from 'react-redux-firebase'
+
+export default function Todos() {
+  useFirebaseConnect([
+    'todos' // { path: '/todos' } // object notation
+  ])
+  
+  const todos = useSelector(state => state.firebase.ordered.todos)
 
-function Todos({ todos, firebase }) {
   if (!isLoaded(todos)) {
     return <div>Loading...</div>
   }
+
   if (isEmpty(todos)) {
     return <div>Todos List Is Empty</div>
   }
+
   return (
     <div>
       <ul>
@@ -171,50 +169,34 @@ function Todos({ todos, firebase }) {
     </div>
   )
 }
-
-export default compose(
-  firebaseConnect(() => [
-    'todos' // { path: '/todos' } // object notation
-  ]),
-  connect(state => ({
-    todos: state.firebase.data.todos
-    // profile: state.firebase.profile // load profile
-  }))
-)(Todos)
 ```
 
-**Queries Based On Props**
+**Queries Based On Route Params**
 
 It is common to make a detail page that loads a single item instead of a whole list of items. A query for a specific `Todos` can be created using
 
 ```jsx
 import React from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
 import { get } from 'lodash'
-import firebaseConnect from 'react-redux-firebase/lib/firebaseConnect'
-import { compose, withHandlers } from 'recompose'
-
-// Component enhancer that loads todo into redux then into the todo prop
-const enhance = compose(
-  firebaseConnect(props => {
-    // Set listeners based on props (prop is route parameter from react-router in this case)
-    return [
-      { path: `todos/${props.params.todoId}` } // create todo listener
-      // `todos/${props.params.todoId}` // equivalent string notation
-    ]
-  }),
-  connect(({ firebase }, props) => ({
-    todo: getVal(firebase, `data/todos/${props.params.todoId}`), // lodash's get can also be used
-  })),
-  withHandlers({
-    updateTodo: props => () => {
-      return firebase.update(`todos/${params.todoId}`, { done: !todo.isDone })
-    }
-  })
-)
-
-function Todo({ todo }) {
+import { useSelector } from 'react-redux'
+import { useFirebaseConnect } from 'react-redux-firebase'
+import { useParams } from 'react-router-dom'
+
+export default function Todo() {
+  const { todoId } = useParams() // matches todos/:todoId in route
+
+  useFirebaseConnect([
+    { path: `todos/${todoId}` } // create todo listener
+    // `todos/${props.params.todoId}` // equivalent string notation
+  ])
+  
+  const todo = useSelector(({ firebase: { data } }) => data.todos && data.todos[todoId])
+
+  function updateTodo() {
+    return firebase.update(`todos/${params.todoId}`, { done: !todo.isDone })
+  }
+
   return (
     <div>
       <input
@@ -227,27 +209,26 @@ function Todo({ todo }) {
     </div>
   )
 }
-
-// Export enhanced component
-export default enhance(Todo)
 ```
 
 **Load Data On Click**
 
 ```jsx
 import React from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { compose } from 'redux'
-import { withFirebase, isLoaded, isEmpty } from 'react-redux-firebase'
+import { useSelector } from 'react-redux'
+import { useFirebase, isLoaded, isEmpty } from 'react-redux-firebase'
+
+function TodosList() {
+  const todos = useSelector(state => state.firebase.ordered.todos)
 
-function TodosList({ todos }) {
   if (!isLoaded(todos)) {
     return <div>Loading...</div>
   }
+
   if (isEmpty(todos)) {
     return <div>Todos List Is Empty</div>
   }
+
   return (
     <ul>
       {
@@ -258,17 +239,10 @@ function TodosList({ todos }) {
     </ul>
   )
 }
-const withTodosData = compose(
-  withFirebase, // or firebaseConnect()
-  connect((state) => ({
-    todos: state.firebase.data.todos,
-    // profile: state.firebase.profile // load profile
-  }))
-)
 
-const EnhancedTodosList = withTodosData(TodosList)
+function Todos() {
+  const firebase = useFirebase()
 
-function Todos({ firebase }) {
   return (
     <div>
       <h1>Todos</h1>
@@ -281,7 +255,7 @@ function Todos({ firebase }) {
 }
 
 // Export enhanced component
-export default withFirebase(Todos)
+export default Todos
 ```
 
 ## Firestore

SUMMARY.md

@@ -27,13 +27,15 @@
   * [React Chrome Redux](/docs/integrations/react-chrome-redux.md)
 * [API Reference](/docs/api/README.md)
   * [constants](/docs/api/constants.md)
-  * [firebaseConnect](/docs/api/firebaseConnect.md)
-  * [withFirebase](/docs/api/withFirebase.md)
-  * [firestoreConnect](/docs/api/firestoreConnect.md)
-  * [withFirestore](/docs/api/withFirestore.md)
-  * [useFirebase](/docs/api/useFirebase.md)
-  * [useFirebaseConnect](/docs/api/useFirebaseConnect.md)
-  * [useFirestore](/docs/api/useFirestore.md)
+  * Hooks
+    * [useFirebase](/docs/api/useFirebase.md)
+    * [useFirebaseConnect](/docs/api/useFirebaseConnect.md)
+    * [useFirestore](/docs/api/useFirestore.md)
+  * HOCs
+    * [firebaseConnect](/docs/api/firebaseConnect.md)
+    * [withFirebase](/docs/api/withFirebase.md)
+    * [firestoreConnect](/docs/api/firestoreConnect.md)
+    * [withFirestore](/docs/api/withFirestore.md)
   * [firebaseReducer](/docs/api/reducer.md)
     * [isInitializingReducer](/docs/api/reducers.md#isinitializingreducer)
     * [requestingReducer](/docs/api/reducers.md#requestingreducer)

docs/auth.md

@@ -296,18 +296,18 @@ const recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button',
   'size': 'invisible',
 });
 firebase.signInWithPhoneNumber(phoneNumber, appVerifier)
-    .then((confirmationResult) => {
-      // SMS sent. Prompt user to type the code from the message, then sign the
-      // user in with confirmationResult.confirm(code).
-      const verificationCode = window.prompt('Please enter the verification ' +
-          'code that was sent to your mobile device.');
-      return confirmationResult.confirm(verificationCode);
-    })
-    .catch((error) => {
-      // Error; SMS not sent
-      // Handle Errors Here
-      return Promise.reject(error)
-    });
+  .then((confirmationResult) => {
+    // SMS sent. Prompt user to type the code from the message, then sign the
+    // user in with confirmationResult.confirm(code).
+    const verificationCode = window.prompt('Please enter the verification ' +
+        'code that was sent to your mobile device.');
+    return confirmationResult.confirm(verificationCode);
+  })
+  .catch((error) => {
+    // Error; SMS not sent
+    // Handle Errors Here
+    return Promise.reject(error)
+  });
 ```
 
 ##### Parameters

docs/firestore.md

@@ -55,13 +55,15 @@ const rrfProps = {
 }
 
 // Setup react-redux so that connect HOC can be used
-const App = () => (
-  <Provider store={store}>
-    <ReactReduxFirebaseProvider {...rrfProps}>
-      <Todos />
-    </ReactReduxFirebaseProvider>
-  </Provider>
-);
+function App() {
+  return (
+    <Provider store={store}>
+      <ReactReduxFirebaseProvider {...rrfProps}>
+        <Todos />
+      </ReactReduxFirebaseProvider>
+    </Provider>
+  );
+}
 
 render(<App/>, document.getElementById('root'));
 ```
@@ -83,10 +85,46 @@ const rrfConfig = {
 
 Firestore queries can be created in two ways:
 
-* [Automatically](#firestoreConnect) - Using `firestoreConnect` HOC (manages mounting/unmounting)
+* [Automatically with Hook](#useFirestoreConnect) - Using `useFirestoreConnect` hook (manages mounting/unmounting)
+* [Automatically with HOC](#firestoreConnect) - Using `firestoreConnect` HOC (manages mounting/unmounting)
 * [Manually](#manual) - Using `get`, or by setting listeners with `setListeners`/`setListener` (requires managing of listeners)
 
-### Automatic {#firestoreConnect}
+### Automatically with Hook {#useFirestoreConnect}
+
+`useFirestoreConnect` is a React hook that manages attaching and detaching listeners for you as the component mounts and unmounts.
+
+#### Examples
+1. Basic query that will attach/detach as the component passed mounts/unmounts. In this case we are setting a listener for the `'todos'` collection:
+
+  ```js
+  import React from 'react'
+  import { useSelector } from 'react-redux'
+  import { useFirestoreConnect } from 'react-redux-firebase'
+
+  export default function SomeComponent() {
+    useFirestoreConnect([
+      { collection: 'todos' } // or 'todos'
+    ])
+    const todos = useSelector(state => state.firestore.ordered.todos)
+  }
+  ```
+
+2. Props can be used as part of queries. In this case we will get a specific todo:
+
+  ```js
+  import React from 'react'
+  import { useSelector } from 'react-redux'
+  import { useFirestoreConnect } from 'react-redux-firebase'
+
+  export default function SomeComponent({ todoId }) {
+    useFirestoreConnect(() => [
+      { collection: 'todos', doc: todoId } // or `todos/${props.todoId}`
+    ])
+    const todos = useSelector(({ firestore: { ordered } }) => ordered.todos && ordered.todos[todoId])
+  }
+  ```
+
+### Automatically with HOC {#firestoreConnect}
 
 `firestoreConnect` is a React Higher Order component that manages attaching and detaching listeners for you as the component mounts and unmounts. It is possible to roll a similar solution yourself, but can get complex when dealing with advanced situations (queries based on props, props changing, etc.)
 

docs/getting_started.md

@@ -73,13 +73,15 @@ const rrfProps = {
 }
 
 // Setup react-redux so that connect HOC can be used
-const App = () => (
-  <Provider store={store}>
-    <ReactReduxFirebaseProvider {...rrfProps}>
-      <Todos />
-    </ReactReduxFirebaseProvider>
-  </Provider>
-);
+function App() {
+  return (
+    <Provider store={store}>
+      <ReactReduxFirebaseProvider {...rrfProps}>
+        <Todos />
+      </ReactReduxFirebaseProvider>
+    </Provider>
+  );
+}
 
 render(<App/>, document.getElementById('root'));
 ```