fix readme

Author: sw-yx

README.md

@@ -4,7 +4,7 @@
 
 [![NPM](https://img.shields.io/npm/v/react-netlify-identity.svg)](https://www.npmjs.com/package/react-netlify-identity) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-Use [Netlify Identity](https://www.netlify.com/docs/identity/) easier with React! This is a thin wrapper over the [gotrue-js](https://github.com/netlify/gotrue-js) library for easily accessing Netlify Identity functionality in your app, with React Hooks. Types are provided.
+Use [Netlify Identity](https://www.netlify.com/docs/identity/) easier with React! This is a thin wrapper over the [gotrue-js](https://github.com/netlify/gotrue-js) library for easily accessing Netlify Identity functionality in your app, with React Context and Hooks. Types are provided.
 
 Two demos:
 
@@ -35,9 +35,9 @@ yarn add react-netlify-identity
 
 ## Usage
 
-⚠️ **Important:** You will need to have an active Netlify site running with Netlify Identity turned on. [Click here for instructions](https://www.netlify.com/docs/identity/#getting-started) to get started/double check that it is on. We will need your site's url (e.g. `https://mysite.netlify.com`) to initialize `useNetlifyIdentity`.
+⚠️ **Important:** You will need to have an active Netlify site running with Netlify Identity turned on. [Click here for instructions](https://www.netlify.com/docs/identity/#getting-started) to get started/double check that it is on. We will need your site's url (e.g. `https://mysite.netlify.com`) to initialize `IdentityContextProvider`.
 
-**As a React Hook**, you can destructure these variables and methods:
+**When you call useIdentityCtx()**, you can destructure these variables and methods:
 
 - `user: User`
 - `setUser`: directly set the user object. Not advised; use carefully!! mostly you should use the methods below
@@ -53,14 +53,17 @@ yarn add react-netlify-identity
 - `authedFetch(endpoint: string, obj = {})` (a thin axios-like wrapper over `fetch` that has the user's JWT attached, for convenience pinging Netlify Functions with Netlify Identity)
 
 ```tsx
-import * as React from "react"
+import React from 'react';
 
-import { useNetlifyIdentity } from "react-netlify-identity"
+import { IdentityContextProvider } from 'react-netlify-identity';
 
-const IdentityContext = React.createContext() // not necessary but recommended
 function App() {
-  const identity = useNetlifyIdentity(url) // supply the url of your Netlify site instance. VERY IMPORTANT
-  return <IdentityContext.Provider value={identity}>{/* rest of your app */}</IdentityContext.Provider>
+  const url = process.env.NETLIFY_URL; // supply the url of your Netlify site instance. VERY IMPORTANT
+  return (
+    <IdentityContextProvider url={url}>
+      {/* rest of your app */}
+    </IdentityContextProvider>
+  );
 }
 ```
 
@@ -74,32 +77,32 @@ Click for More Example code
 ```tsx
 // log in/sign up example
 function Login() {
-  const { loginUser, signupUser } = React.useContext(IdentityContext)
-  const formRef = React.useRef()
-  const [msg, setMsg] = React.useState("")
+  const { loginUser, signupUser } = useIdentityCtx();
+  const formRef = React.useRef();
+  const [msg, setMsg] = React.useState('');
   const signup = () => {
-    const email = formRef.current.email.value
-    const password = formRef.current.password.value
+    const email = formRef.current.email.value;
+    const password = formRef.current.password.value;
     signupUser(email, password)
-      .then((user) => {
-        console.log("Success! Signed up", user)
-        navigate("/dashboard")
+      .then(user => {
+        console.log('Success! Signed up', user);
+        navigate('/dashboard');
       })
-      .catch((err) => console.error(err) || setMsg("Error: " + err.message))
-  }
+      .catch(err => console.error(err) || setMsg('Error: ' + err.message));
+  };
   return (
     <form
       ref={formRef}
-      onSubmit={(e) => {
-        e.preventDefault()
-        const email = e.target.email.value
-        const password = e.target.password.value
+      onSubmit={e => {
+        e.preventDefault();
+        const email = e.target.email.value;
+        const password = e.target.password.value;
         load(loginUser(email, password, true))
-          .then((user) => {
-            console.log("Success! Logged in", user)
-            navigate("/dashboard")
+          .then(user => {
+            console.log('Success! Logged in', user);
+            navigate('/dashboard');
           })
-          .catch((err) => console.error(err) || setMsg("Error: " + err.message))
+          .catch(err => console.error(err) || setMsg('Error: ' + err.message));
       }}
     >
       <div>
@@ -120,55 +123,58 @@ function Login() {
         {msg && <pre>{msg}</pre>}
       </div>
     </form>
-  )
+  );
 }
 
 // log out user
 function Logout() {
-  const { logoutUser } = React.useContext(IdentityContext)
-  return <button onClick={logoutUser}>You are signed in. Log Out</button>
+  const { logoutUser } = useIdentityCtx();
+  return <button onClick={logoutUser}>You are signed in. Log Out</button>;
 }
 
 // check `identity.user` in a protected route
 function PrivateRoute(props) {
-  const identity = React.useContext(IdentityContext)
-  let { as: Comp, ...rest } = props
+  const identity = useIdentityCtx();
+  let { as: Comp, ...rest } = props;
   return identity.user ? (
     <Comp {...rest} />
   ) : (
     <div>
       <h3>You are trying to view a protected page. Please log in</h3>
       <Login />
     </div>
-  )
+  );
 }
 
 // check if user has confirmed their email
 // use authedFetch API to make a request to Netlify Function with the user's JWT token,
 // letting your function use the `user` object
 function Dashboard() {
-  const { isConfirmedUser, authedFetch } = React.useContext(IdentityContext)
-  const [msg, setMsg] = React.useState("Click to load something")
+  const { isConfirmedUser, authedFetch } = useIdentityCtx();
+  const [msg, setMsg] = React.useState('Click to load something');
   const handler = () => {
-    authedFetch.get("/.netlify/functions/authEndPoint").then(setMsg)
-  }
+    authedFetch.get('/.netlify/functions/authEndPoint').then(setMsg);
+  };
   return (
     <div>
       <h3>This is a Protected Dashboard!</h3>
       {!isConfirmedUser && (
-        <pre style={{ backgroundColor: "papayawhip" }}>
-          You have not confirmed your email. Please confirm it before you ping the API.
+        <pre style={{ backgroundColor: 'papayawhip' }}>
+          You have not confirmed your email. Please confirm it before you ping
+          the API.
         </pre>
       )}
       <hr />
       <div>
         <p>You can try pinging our authenticated API here.</p>
-        <p>If you are logged in, you should be able to see a `user` info here.</p>
+        <p>
+          If you are logged in, you should be able to see a `user` info here.
+        </p>
         <button onClick={handler}>Ping authenticated API</button>
         <pre>{JSON.stringify(msg, null, 2)}</pre>
       </div>
     </div>
-  )
+  );
 }
 ```