@machinemetrics/mm-react-tools 2.2.0-dev → 3.0.1-beta

package/README.md

@@ -6,15 +6,23 @@ Components, hooks, and helper functions for writing React apps using MachineMetr
 
 ## Table of Contents
 
+- [Upgrading to 3.x] (#upgrading-to-3.x)
 - [Install](#install)
 - [Getting Started](#getting-started)
 - [Client ID and Secret](#client-id-and-secret)
 - [License](#license)
 
+## Upgrading to 3.x
+
+When upgrading to 3.x or newer, there are a few breaking changes that need to be addressed.
+
+- The `domain` property passed to `MMProvider` is no longer used so it can be removed. This information is inferred from the URL being loaded.
+- If you pass `<Route>` components to `MMProvider` either directly or in some level more deeply nested within your application, it must be contained within a `<Routes>` component.
+
 ## Install
 
 ```bash
-yarn add mm-react-tools
+npm install @machinemetrics/mm-react-tools
 ```
 
 ## Peer Dependencies
@@ -22,7 +30,7 @@ yarn add mm-react-tools
 Due to how Apollo, React, and other libraries work, there are some additional dependencies that you'll need to include in your project:
 
 ```bash
-yarn add react react-router-dom styled-components @apollo/client subscriptions-transport-ws graphql
+npm install react react-router-dom styled-components @apollo/client
 ```
 
 ## Getting Started
@@ -32,12 +40,11 @@ Wrap your application in the `MMProvider` to wire up everything necessary to aut
 ```jsx
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { MMProvider } from 'mm-react-tools';
+import { MMProvider } from '@machinemetrics/mm-react-tools';
 import App from './App';
 
 ReactDOM.render(
   <MMProvider
-    domain={process.env.REACT_APP_URL}
     clientId={process.env.REACT_APP_CLIENT_ID}
     clientSecret={process.env.REACT_APP_CLIENT_SECRET}
     releaseStage={process.env.REACT_APP_RELEASE_STAGE}
@@ -56,17 +63,19 @@ Use the `ProtectedRoute` to kick off the login flow.
 ```jsx
 // App.js
 import React from 'react';
-import { Route } from 'react-router-dom';
-import { PrivateLayout } from 'mm-react-tools';
+import { Route, Routes } from 'react-router-dom';
+import { PrivateLayout } from '@machinemetrics/mm-react-tools';
 import PublicPage from './PublicPage';
 import PrivatePage from './PrivatePage';
 
 function App() {
   return (
-    <Route exact path='/public' element={<PublicPage />} />
-    <Route element={<PrivateLayout />}>
-      <Route path="/private" element={<PrivatePage />}>
-    </Route>
+    <Routes>
+      <Route exact path='/public' element={<PublicPage />} />
+      <Route element={<PrivateLayout />}>
+        <Route path="/private" element={<PrivatePage />}>
+      </Route>
+    <Routes>
   );
 }