remove boundary

Author: sw-yx

README.md

@@ -59,24 +59,7 @@ function AuthStatusView() {
 }
 ```
 
-You may also code split the Modal if you wish with `React.lazy` and `React.Suspense`:
-
-```js
-// code split the modal til you need it!
-const IdentityModal = React.lazy(() => import('react-netlify-identity-widget'))
-
-function AuthStatusView() {
-  // ...
-  return (
-    <div className="App">
-      {/** ... */}
-      <React.Suspense fallback="loading...">
-        <IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />
-      </React.Suspense>
-    </div>
-  )
-}
-```
+You may also code split the Modal if you wish with `React.lazy` and `React.Suspense`.
 
 ## Blogposts
 

example/package.json

@@ -6,18 +6,21 @@
     "@reach/dialog": "^0.2.3",
     "@reach/tabs": "^0.1.3",
     "@reach/visually-hidden": "^0.1.3",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-netlify-identity": "^0.1.9",
+    "react-netlify-identity-widget": "^0.2.1",
+    "react-scripts": "^3.0.0"
+  },
+  "devDependencies": {
     "@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.2",
-    "react-scripts": "^3.0.0",
     "typescript": "3.4.5"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "REACT_APP_NETLIFY_IDENTITY_URL=https://react-netlify-identity-widget.netlify.com/ react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

example/src/App.tsx

@@ -1,57 +1,65 @@
-import React from "react"
-import "./App.css"
-import { useIdentityContext, IdentityContextProvider } from "react-netlify-identity-widget"
-import "react-netlify-identity-widget/styles.css"
+import React from 'react'
+import './App.css'
+import { IdentityModal, useIdentityContext, IdentityContextProvider } from 'react-netlify-identity-widget'
+import 'react-netlify-identity-widget/styles.css'
 
 function App() {
   const url = process.env.REACT_APP_NETLIFY_IDENTITY_URL // should look something like "https://foo.netlify.com"
-  if (!url) throw new Error('process.env.REACT_APP_NETLIFY_IDENTITY_URL is blank, which means you probably forgot to set it in your Netlify environment variables')
+  if (!url)
+    throw new Error(
+      'process.env.REACT_APP_NETLIFY_IDENTITY_URL is blank, which means you probably forgot to set it in your Netlify environment variables',
+    )
   return (
     <IdentityContextProvider url={url}>
       <AuthStatusView />
     </IdentityContextProvider>
   )
 }
 
-// code split the modal til you need it!
-const IdentityModal = React.lazy(() => import("react-netlify-identity-widget"))
+// // code split the modal til you need it!
+// const IdentityModal = React.lazy(() => import('react-netlify-identity-widget'))
 
 function AuthStatusView() {
   const identity = useIdentityContext()
   const [dialog, setDialog] = React.useState(false)
   const name =
-    (identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.full_name) || "NoName"
+    (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 (
     <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)}>
+            {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)}>
+            <button className="btn" style={{ maxWidth: 400, background: 'darkgreen' }} onClick={() => setDialog(true)}>
               LOG IN
             </button>
           </>
         )}
 
-        <React.Suspense fallback="loading...">
-          <IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />
-        </React.Suspense>
+        <IdentityModal
+          showDialog={dialog}
+          onCloseDialog={() => setDialog(false)}
+          onLogin={(user) => console.log('hello ', user!.user_metadata)}
+          onSignup={(user) => console.log('welcome ', user!.user_metadata)}
+          onLogout={() => console.log('bye ', name)}
+        />
+
         <h3>
-          Or{" "}
+          Or{' '}
           <a
             href="https://github.com/sw-yx/react-netlify-identity-widget"
             target="_blank"
             rel="noopener noreferrer"
-            style={{ color: "powderblue" }}
+            style={{ color: 'powderblue' }}
           >
             view the source
           </a>