feat: example code

hey3 · hey3 · commit 5692649c137a · 2022-12-30T06:24:52.000Z
diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,10 @@
+# Example
+
+## How to Use
+
+Install it and run:
+
+```bash
+pnpm install
+pnpm dev
+```
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>usePolling Example</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/examples/package.json b/examples/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "exmaple",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "@vitejs/plugin-react-swc": "3.0.1",
+    "typescript": "4.9.4",
+    "vite": "4.0.3"
+  },
+  "scripts": {
+    "dev": "vite"
+  }
+}
diff --git a/examples/src/app.tsx b/examples/src/app.tsx
@@ -0,0 +1,29 @@
+import { useState, type FC } from 'react'
+import { usePolling } from '../../src'
+
+export const App: FC = () => {
+  const [count, setCount] = useState(0)
+
+  const updateCount = async (): Promise<void> => {
+    await sleep(100)
+
+    setCount(c => c + 1)
+  }
+
+  const { isPaused, pause, resume } = usePolling(updateCount, 1000)
+
+  return (
+    <>
+      <div>Polling: {isPaused ? 'OFF' : 'ON'}</div>
+      <div>Count: {count}</div>
+      <button onClick={() => pause()} disabled={isPaused}>
+        Pause
+      </button>
+      <button onClick={() => resume()} disabled={!isPaused}>
+        Resume
+      </button>
+    </>
+  )
+}
+
+const sleep = (ms: number): Promise<unknown> => new Promise(res => setTimeout(res, ms))
diff --git a/examples/src/index.tsx b/examples/src/index.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { App } from './app'
+
+const rootElement = window.document.getElementById('root')
+if (!rootElement) throw new Error('Failed to find the root element')
+const root = createRoot(rootElement)
+
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)
diff --git a/examples/tsconfig.json b/examples/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "types": ["react"],
+    "typeRoots": ["node_modules/@types", "src/types"],
+    "strict": true,
+    "exactOptionalPropertyTypes": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  }
+}
diff --git a/examples/vite.config.ts b/examples/vite.config.ts
@@ -0,0 +1,6 @@
+import reactPlugin from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [reactPlugin()],
+})
