change api to useIdentityContext

Author: sw-yx

README.md

@@ -21,7 +21,7 @@ and the styles are optional but provided. here's how to use `IdentityModal, useN
 ```tsx
 import React from "react"
 import "./App.css"
-import { useIdentityCtx, IdentityContextProvider } from "react-netlify-identity-widget"
+import { useIdentityContext, IdentityContextProvider } from "react-netlify-identity-widget"
 import "react-netlify-identity-widget/styles.css"
 
 function App() {
@@ -38,7 +38,7 @@ export default App
 const IdentityModal = React.lazy(() => import("react-netlify-identity-widget"))
 
 function AuthStatusView() {
-  const identity = useIdentityCtx()
+  const identity = useIdentityContext()
   const [dialog, setDialog] = React.useState(false)
   const name =
     (identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.name) || "NoName"

example/package.json

@@ -3,18 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reach/dialog": "^0.2.3",
+    "@reach/tabs": "^0.1.3",
+    "@reach/visually-hidden": "^0.1.3",
     "@types/jest": "24.0.11",
     "@types/node": "11.13.8",
     "@types/react": "16.8.14",
     "@types/react-dom": "16.8.4",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-netlify-identity-widget": "^0.1.0",
     "react-scripts": "^3.0.0",
-    "react-netlify-identity-widget": "latest",
-    "typescript": "3.4.5",
-    "@reach/dialog": "^0.2.3",
-    "@reach/tabs": "^0.1.3",
-    "@reach/visually-hidden": "^0.1.3"
+    "typescript": "3.4.5"
   },
   "scripts": {
     "start": "react-scripts start",

example/src/App.tsx

@@ -1,59 +1,62 @@
 import React from "react"
 import "./App.css"
-import { IdentityModal, useNetlifyIdentity, IdentityContextProvider } from "react-netlify-identity-widget"
+import { useIdentityContext, IdentityContextProvider } from "react-netlify-identity-widget"
 import "react-netlify-identity-widget/styles.css"
 
+function App() {
+  const url = "https://react-netlify-identity-widget.netlify.com"
+  return (
+    <IdentityContextProvider url={url}>
+      <AuthStatusView />
+    </IdentityContextProvider>
+  )
+}
 
+// code split the modal til you need it!
+const IdentityModal = React.lazy(() => import("react-netlify-identity-widget"))
 
-function App() {
+function AuthStatusView() {
+  const identity = useIdentityContext()
   const [dialog, setDialog] = React.useState(false)
-  const identity = useNetlifyIdentity("https://react-netlify-identity-widget.netlify.com")
   const name =
     (identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.full_name) || "NoName"
   const avatar_url = identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.avatar_url
   return (
-    <IdentityContextProvider value={identity}>
-      <div className="App">
-        <header className="App-header">
-          {identity && identity.isLoggedIn ? (
-            <>
-              <h1> hello {name}!</h1>
-              {avatar_url && <img src={avatar_url} style={{ height: 100, borderRadius: "50%" }} />}
-              <button
-                className="btn"
-                style={{ maxWidth: 400, background: "orangered" }}
-                onClick={() => setDialog(true)}
-              >
-                LOG OUT
-              </button>
-            </>
-          ) : (
-              <>
-                <h1> hello! try logging in! </h1>
-                <button
-                  className="btn"
-                  style={{ maxWidth: 400, background: "darkgreen" }}
-                  onClick={() => setDialog(true)}
-                >
-                  LOG IN
-              </button>
-              </>
-            )}
+    <div className="App">
+      <header className="App-header">
+        {identity && identity.isLoggedIn ? (
+          <>
+            <h1> hello {name}!</h1>
+            {avatar_url && <img alt="user name" src={avatar_url} style={{ height: 100, borderRadius: "50%" }} />}
+            <button className="btn" style={{ maxWidth: 400, background: "orangered" }} onClick={() => setDialog(true)}>
+              LOG OUT
+            </button>
+          </>
+        ) : (
+          <>
+            <h1> hello! try logging in! </h1>
+            <button className="btn" style={{ maxWidth: 400, background: "darkgreen" }} onClick={() => setDialog(true)}>
+              LOG IN
+            </button>
+          </>
+        )}
+
+        <React.Suspense fallback="loading...">
           <IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />
-          <h3>
-            Or{" "}
-            <a
-              href="https://github.com/sw-yx/react-netlify-identity-widget"
-              target="_blank"
-              style={{ color: "powderblue" }}
-            >
-              view the source
-            </a>
-          </h3>
-        </header>
-      </div>
-    </IdentityContextProvider>
+        </React.Suspense>
+        <h3>
+          Or{" "}
+          <a
+            href="https://github.com/sw-yx/react-netlify-identity-widget"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: "powderblue" }}
+          >
+            view the source
+          </a>
+        </h3>
+      </header>
+    </div>
   )
 }
-
 export default App