@trycourier/react-provider 1.14.2 → 1.15.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Courier
+Copyright (c) 2022 Courier
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -0,0 +1,118 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Props](#props)
+- [Listening to Messsages](#listening-to-messsages)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+<a name="0propsmd"></a>
+
+### [Props](#props)
+
+```
+export interface ICourierProvider {
+  // Public Client Key used to identify your workspace
+  clientKey?: string;
+
+  // Matches the recipient/user id used in Courier
+  userId?: string;
+
+  // HMAC signature
+  userSignature?: string;
+
+  // Callback to listen for new messages
+  onMessage?: Interceptor;
+}
+```
+
+<a name="1listening-to-messagesmd"></a>
+
+### [Listening to Messsages](#listening)
+
+There are a few ways to listen for messages and being able react.
+
+1. Via Props
+
+```
+import { CourierProvider } from "@trycourier/react-provider";
+
+const MyApp = ({ children }) => {
+  const handleOnMessage = (messsage: ICourierMessage) => {
+    console.log(message);
+    return message;
+  }
+
+  return (
+    <CourierProvider onMessage={handleOnMessage}>
+      {children}
+    </CourierProvider>
+  )
+}
+```
+
+2. Via Transport
+
+You can create a Transport and pass it into CourierProvider.
+
+```
+
+import { useEffect } from 'react';
+import { CourierProvider, CourierTransport } from "@trycourier/react-provider";
+
+const courierTransport = new CourierTransport({
+  clientKey: CLIENT_KEY,
+});
+
+const MyApp = ({ children }) => {
+  useEffect(() => {
+    courierTransport.intercept((message) => {
+      console.log(message);
+      return message;
+    });
+  })
+
+  return (
+    <CourierProvider transport={courierTransport}>
+      {children}
+    </CourierProvider>
+  )
+}
+```
+
+3. Via useCourier hook
+
+If you don't pass in a transport, we will automatically create one. You can then access the transport via the CourierContext exposed through useCourier.
+
+```
+import { useEffect } from 'react';
+import { CourierProvider, useCourier } from "@trycourier/react-provider";
+
+const courierTransport = new CourierTransport({
+  clientKey: CLIENT_KEY,
+});
+
+const MyComponent = () => {
+  const courier = useCourier();
+
+  useEffect(() => {
+    courier.transport.intercept((message) => {
+      console.log(message);
+      return message;
+    });
+  })
+
+  return (
+    <div>Hello World</div>
+  );
+}
+
+
+const MyApp = ({ children }) => {
+  return (
+    <CourierProvider>
+      <MyComponent />
+    </CourierProvider>
+  )
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/react-provider",
-  "version": "1.14.2",
+  "version": "1.15.0",
   "description": "",
   "main": "dist/index.js",
   "types": "typings/index.d.ts",
@@ -16,7 +16,7 @@
   },
   "license": "ISC",
   "dependencies": {
-    "@trycourier/client-graphql": "^1.14.2",
+    "@trycourier/client-graphql": "^1.15.0",
     "buffer": "^6.0.3",
     "graphql": "^15.5.0",
     "react-use": "^17.2.1",
@@ -32,5 +32,5 @@
     "dist/",
     "typings/"
   ],
-  "gitHead": "c66337dc1a5adf809384b7d3cd032ed702e2ff6c"
+  "gitHead": "8f45c99f7b74d24afa6df3895e12f4bdc1bbfe90"
 }