Added example

README.md

@@ -6,10 +6,12 @@
 
 Use [Netlify Identity](https://www.netlify.com/docs/identity/?utm_source=github&utm_medium=swyx-RNI&utm_campaign=devex) 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:
+Three demos:
 
 - [a full demo here](https://netlify-gotrue-in-react.netlify.com/) with [source code](https://github.com/netlify/create-react-app-lambda/tree/reachRouterAndGoTrueDemo/src)
-- the `example` folder here has [a demo hosted here](https://react-netlify-identity.netlify.com) with [deploy logs here](https://app.netlify.com/sites/react-netlify-identity/deploys)
+- [example with Reach Router](https://github.com/sw-yx/react-netlify-identity/tree/master/examples/example-reach-router) with [a demo hosted here](https://react-netlify-identity.netlify.com) and [deployed logs here](https://app.netlify.com/sites/react-netlify-identity/deploys)
+- [example with React Router](https://github.com/sw-yx/react-netlify-identity/tree/master/examples/example-react-router) with [a demo hosted here](https://react-netlify-identity-example.netlify.com)
+
 
 **This library is not officially maintained by Netlify.** This is written by swyx for his own use (and others with like minds 😎) and will be maintained as a personal project unless formally adopted by Netlify. See below for official alternatives.
 

examples/example-react-router/README.md

@@ -0,0 +1,14 @@
+# React Netlify Identity Example
+
+This is an example of using `react-netlify-identity` with:
+
+- TypeScript
+- React
+- React Router
+- Netlify Identity
+
+Additionally, styling with:
+
+- styled-components
+
+Deployed demo site [here](https://react-netlify-identity-example.netlify.com/).

examples/example-react-router/global.d.ts

@@ -0,0 +1 @@
+declare module '*.svg';

examples/example-react-router/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "react-netlify-identity-example",
+  "version": "1.0.0",
+  "author": "Lewis Llobera <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^16.10.1",
+    "react-dom": "^16.10.1",
+    "react-netlify-identity": "^0.1.9",
+    "react-router-dom": "^5.1.2"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.4",
+    "@types/react-dom": "^16.9.1",
+    "@types/react-router-dom": "^5.1.0",
+    "styled-components": "^4.4.0",
+    "typescript": "^3.6.2"
+  }
+}

examples/example-react-router/src/App.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
+import {
+  IdentityContextProvider,
+  useIdentityContext,
+} from 'react-netlify-identity';
+
+import { GlobalStyles } from './components';
+import { CreateAccount, Home, LogIn, Welcome } from './views';
+
+interface Props {
+  component: React.FunctionComponent;
+  exact?: boolean;
+  path: string;
+}
+
+const PublicRoute: React.FunctionComponent<Props> = (props: Props) => {
+  const { isLoggedIn } = useIdentityContext();
+  return isLoggedIn ? <Redirect to="/home" /> : <Route {...props} />;
+};
+
+const PrivateRoute: React.FunctionComponent<Props> = (props: Props) => {
+  const { isLoggedIn } = useIdentityContext();
+  return isLoggedIn ? <Route {...props} /> : <Redirect to="/welcome" />;
+};
+
+export const App: React.FunctionComponent = () => {
+  const url = 'https://react-netlify-identity-example.netlify.com';
+
+  return (
+    <>
+      <GlobalStyles />
+      <IdentityContextProvider url={url}>
+        <BrowserRouter>
+          <Switch>
+            <PublicRoute exact path="/" component={Welcome} />
+            <PublicRoute path="/welcome" component={Welcome} />
+            <PublicRoute path="/createaccount" component={CreateAccount} />
+            <PublicRoute path="/login" component={LogIn} />
+            <PrivateRoute path="/home" component={Home} />
+          </Switch>
+        </BrowserRouter>
+      </IdentityContextProvider>
+    </>
+  );
+};

examples/example-react-router/src/assets/index.ts

@@ -0,0 +1,3 @@
+import googleLogo from './googleLogo.svg';
+
+export { googleLogo };

examples/example-react-router/src/components/AuthOption/AuthOption.styles.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const AuthOption = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto 10vh auto;
+  width: 100%;
+`;

examples/example-react-router/src/components/AuthOption/index.ts

@@ -0,0 +1 @@
+export { AuthOption } from './AuthOption.styles';

examples/example-react-router/src/components/AuthText/AuthText.styles.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const AuthText = styled.p`
+  border-bottom: 1px solid lightgray;
+  display: block;
+  font-weight: 700;
+  line-height: 1.4;
+  margin-bottom: 3vh;
+  text-align: center;
+  width: 100%;
+`;

examples/example-react-router/src/components/AuthText/index.ts

@@ -0,0 +1 @@
+export { AuthText } from './AuthText.styles';

examples/example-react-router/src/components/Button/Button.styles.ts

@@ -0,0 +1,44 @@
+import styled, { keyframes } from 'styled-components';
+
+import { BREAKPOINT } from '../../constants/constants';
+
+const animation = keyframes`
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.9);
+  }
+`;
+
+interface Props {
+  secondary?: boolean;
+}
+
+export const Button = styled.button`
+  align-items: center;
+  background-color: ${(props: Props): string =>
+    props.secondary ? 'transparent' : 'var(--color-accent)'};
+  border-radius: var(--radius-l);
+  color: var(--color-dark);
+  display: flex;
+  font-weight: 700;
+  height: 52px;
+  justify-content: center;
+  margin: 0 auto;
+  transition: 0.5s;
+  width: 300px;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  :active {
+    animation: ${animation} 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+
+  @media (max-width: ${BREAKPOINT}px) {
+    width: 280px;
+  }
+`;

examples/example-react-router/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { Button } from './Button.styles';

examples/example-react-router/src/components/ButtonGoogle/ButtonGoogle.styles.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+import { Button } from '../../components';
+
+export const Logo = styled.img`
+  margin-right: 24px;
+`;
+
+export const StyledButton = styled(Button)`
+  background-color: #4285f4;
+  background-image: none;
+  color: #ffffff;
+`;

examples/example-react-router/src/components/ButtonGoogle/ButtonGoogle.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useIdentityContext } from 'react-netlify-identity';
+
+import { Logo, StyledButton } from './ButtonGoogle.styles';
+import { googleLogo } from '../../assets';
+
+interface Props {
+  children: string;
+}
+
+export const ButtonGoogle: React.FunctionComponent<Props> = (props: Props) => {
+  const { loginProvider } = useIdentityContext();
+
+  const logInWithGoogle = (): void => {
+    loginProvider('google');
+  };
+
+  return (
+    <StyledButton onClick={logInWithGoogle}>
+      <Logo src={googleLogo} />
+      {props.children}
+    </StyledButton>
+  );
+};

examples/example-react-router/src/components/ButtonGoogle/index.ts

@@ -0,0 +1 @@
+export { ButtonGoogle } from './ButtonGoogle';

examples/example-react-router/src/components/Container/Container.styles.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+import { PAGE_WIDTH } from '../../constants/constants';
+
+interface Props {
+  between?: boolean;
+  paddingBottom?: string;
+  partial?: boolean;
+  row?: boolean;
+}
+
+export const Container = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: ${(props: Props): string => (props.row ? 'row' : 'column')};
+  justify-content: ${(props: Props): string =>
+    props.between ? 'space-between' : 'center'};
+  height: ${(props: Props): string => (props.partial ? '80vh' : '100%')};
+  margin-left: auto;
+  margin-right: auto;
+  max-width: ${PAGE_WIDTH}px;
+  padding-bottom: ${(props: Props): string => {
+    switch (props.paddingBottom) {
+      case 'large':
+        return '200px';
+      case 'medium':
+        return '120px';
+      default:
+        return 'auto';
+    }
+  }};
+  padding-left: var(--padding);
+  padding-right: var(--padding);
+  width: 100%;
+`;

examples/example-react-router/src/components/Container/index.ts

@@ -0,0 +1 @@
+export { Container } from './Container.styles';

examples/example-react-router/src/components/Form/Form.styles.ts

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+import { BREAKPOINT } from '../../constants/constants';
+
+interface Props {
+  narrow?: boolean;
+}
+
+export const Form = styled.form`
+  backdrop-filter: blur(2px);
+  background-color: var(--color-background-translucent);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: ${(props: Props): string => (props.narrow ? '60%' : '100%')};
+
+  @media (max-width: ${BREAKPOINT}px) {
+    width: 100%;
+  }
+`;

examples/example-react-router/src/components/Form/index.ts

@@ -0,0 +1 @@
+export { Form } from './Form.styles';