[messaging] Add useToken hook

Author: chrisbianca

auth/useAuthState.ts

@@ -34,7 +34,7 @@ export default (auth: Auth, options?: AuthStateOptions): AuthStateHook => {
     return () => {
       listener();
     };
-  }, [auth]);
+  }, [auth, options]);
 
   const resArray: AuthStateHook = [value, loading, error];
   return useMemo<AuthStateHook>(() => resArray, resArray);

functions/README.md

@@ -9,9 +9,9 @@ All hooks can be imported from `react-firebase-hooks/functions`, e.g.
 import { useHttpsCallable } from 'react-firebase-hooks/functions';
 ```
 
-List of Cloud Firestore hooks:
+List of Cloud Functions hooks:
 
-- [React Firebase Hooks - Cloud Firestore](#react-firebase-hooks---cloud-firestore)
+- [React Firebase Hooks - Cloud Functions](#react-firebase-hooks---cloud-functions)
   - [useHttpsCallable](#usehttpscallable)
     - [Full example](#full-example)
 

messaging/README.md

@@ -0,0 +1,54 @@
+# React Firebase Hooks - Cloud Messaging
+
+React Firebase Hooks provides a convenience hook for getting a cloud messaging token, providing an `error` and `loading` property
+to give a complete lifecycle for accessing the cloud messaging token on Firebase Cloud Messaging.
+
+All hooks can be imported from `react-firebase-hooks/messaging`, e.g.
+
+```js
+import { useToken } from 'react-firebase-hooks/messaging';
+```
+
+List of Cloud Messaging hooks:
+
+- [React Firebase Hooks - Cloud Messaging](#react-firebase-hooks---cloud-messaging)
+  - [useToken](#usetoken)
+    - [Full example](#full-example)
+
+### useToken
+
+```js
+const [token, loading, error] = useToken(messaging);
+```
+
+Get a token from Firebase Cloud Messaging
+
+The `useToken` hook takes the following parameters:
+
+- `messaging`: `messaging.Messaging` instance for your Firebase app
+
+Returns:
+
+- `token`: a `string` token to use with cloud messaging
+- `loading`: a `boolean` to indicate if the function is still being executed
+- `error`: Any `Error` returned by Firebase when trying to execute the function, or `undefined` if there is no error
+
+#### Full example
+
+```js
+import { getMessaging } from 'firebase/messaging';
+import { useToken } from 'react-firebase-hooks/messaging';
+
+const MessagingToken = () => {
+  const [token, loading, error] = useToken(getMessaging(firebaseApp));
+  return (
+    <div>
+      <p>
+        {error && <strong>Error: {JSON.stringify(error)}</strong>}
+        {loading && <span>Loading token...</span>}
+        {token && <span>Token:{token}</span>}
+      </p>
+    </div>
+  );
+};
+```

messaging/index.ts

@@ -0,0 +1 @@
+export { default as useToken, TokenHook } from './useToken';

messaging/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "react-firebase-hooks/messaging",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/functions/index.d.ts"
+}

messaging/useToken.ts

@@ -0,0 +1,19 @@
+import { Messaging, getToken } from 'firebase/messaging';
+import { useEffect, useMemo } from 'react';
+import { LoadingHook, useLoadingValue } from '../util';
+
+export type TokenHook = LoadingHook<string | null, Error>;
+
+export default (messaging: Messaging): TokenHook => {
+  const { error, loading, setError, setValue, value } = useLoadingValue<
+    string | null,
+    Error
+  >();
+
+  useEffect(() => {
+    getToken(messaging).then(setValue).catch(setError);
+  }, [messaging]);
+
+  const resArray: TokenHook = [value, loading, error];
+  return useMemo<TokenHook>(() => resArray, resArray);
+};

package.json

@@ -34,6 +34,11 @@
     "functions/dist/util",
     "functions/dist/*.js.flow",
     "functions/package.json",
+    "messaging/dist/*.js",
+    "messaging/dist/functions",
+    "messaging/dist/util",
+    "messaging/dist/*.js.flow",
+    "messaging/package.json",
     "storage/dist/*.js",
     "storage/dist/storage",
     "storage/dist/util",

rollup.config.js

@@ -10,13 +10,15 @@ import authPkg from './auth/package.json';
 import databasePkg from './database/package.json';
 import firestorePkg from './firestore/package.json';
 import functionsPkg from './functions/package.json';
+import messagingPkg from './messaging/package.json';
 import storagePkg from './storage/package.json';
 
 const pkgsByName = {
   auth: authPkg,
   database: databasePkg,
   firestore: firestorePkg,
   functions: functionsPkg,
+  messaging: messagingPkg,
   storage: storagePkg,
 };
 
@@ -35,10 +37,18 @@ const external = [
   'firebase/database',
   'firebase/firestore',
   'firebase/functions',
+  'firebase/messaging',
   'firebase/storage',
 ];
 
-const components = ['auth', 'database', 'firestore', 'functions', 'storage'];
+const components = [
+  'auth',
+  'database',
+  'firestore',
+  'functions',
+  'messaging',
+  'storage',
+];
 
 export default components
   .map((component) => {