init

example/package.json

@@ -17,8 +17,8 @@
     "@types/node": "link:../node_modules/@types/node",
     "@types/react": "link:../node_modules/@types/react",
     "@types/react-dom": "link:../node_modules/@types/react-dom",
-    "react": "link:../node_modules/react",
-    "react-dom": "link:../node_modules/react-dom",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "react-scripts": "link:../node_modules/react-scripts",
     "typescript": "link:../node_modules/typescript",
     "auth-context-provider": "link:.."

example/src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
-
-it('renders without crashing', () => {
-  const div = document.createElement('div')
-  ReactDOM.render(<App />, div)
-  ReactDOM.unmountComponentAtNode(div)
-})

example/src/App.tsx

@@ -1,10 +1,18 @@
 import React from 'react'
 
-import { ExampleComponent } from 'auth-context-provider'
-import 'auth-context-provider/dist/index.css'
+import AuthContextProvider from 'auth-context-provider'
+import FormLogin from './FormLogin'
 
 const App = () => {
-  return <ExampleComponent text="Create React Library Example 😄" />
+  return <FormLogin/>
 }
 
-export default App
+const authUrl = 'http://localhost:8080/authenticate'
+
+const EnhancedApp = () => {
+  return <AuthContextProvider authUrl={authUrl}>
+    <App />
+  </AuthContextProvider>
+}
+
+export default EnhancedApp

example/src/FormLogin.tsx

@@ -0,0 +1,50 @@
+import React, { useState, useCallback } from 'react'
+import { useAuthContext } from 'auth-context-provider'
+
+const FormLogin = () => {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const auth: any = useAuthContext()
+
+  const onSubmit = useCallback(
+    (authenticationInfo) => {
+      auth.login(authenticationInfo)
+    },
+    [auth]
+  )
+
+  return (
+    <>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          onSubmit({ username, password })
+        }}
+      >
+        <label htmlFor='username'>Username</label>
+        <input
+          type='text'
+          id='username'
+          value={username}
+          onChange={(e) => {
+            setUsername(e.target.value)
+          }}
+        />
+
+        <label htmlFor='password'>Password</label>
+        <input
+          type='password'
+          id='password'
+          value={password}
+          onChange={(e) => {
+            setPassword(e.target.value)
+          }}
+        />
+        <button type={'submit'}>Submit</button>
+      </form>
+      <br/>
+    </>
+  )
+}
+
+export default FormLogin

example/src/index.css

@@ -1,14 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

example/src/index.tsx

@@ -1,5 +1,3 @@
-import './index.css'
-
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'

example/src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';

example/tsconfig.json

@@ -2,7 +2,10 @@
   "compilerOptions": {
     "outDir": "dist",
     "module": "esnext",
-    "lib": ["dom", "esnext"],
+    "lib": [
+      "dom",
+      "esnext"
+    ],
     "moduleResolution": "node",
     "jsx": "react",
     "sourceMap": true,
@@ -15,8 +18,21 @@
     "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "target": "es5",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "build"]
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "build"
+  ]
 }