chore: add demo example

Author: AXeL-dev

example/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "lodash": "^4.17.21",
     "react": "link:../node_modules/react",
     "react-dom": "^16.9.0",
     "react-scripts": "^3.0.1",

example/src/App.js

@@ -1,13 +1,81 @@
-import React from 'react'
+import React from 'react';
+import axios from 'axios';
+import _ from 'lodash';
 
-import { useMyHook } from 'react-use-cancel-token'
+import useCancelToken from 'react-use-cancel-token';
 
 const App = () => {
-  const example = useMyHook()
+  const [search, setSearch] = React.useState('');
+  const [searching, setSearching] = React.useState(false);
+  const [result, setResult] = React.useState('No results.');
+  const { newCancelToken, cancelPreviousRequest, isCancel } = useCancelToken();
+
+  const performSearch = async (keywords = search) => {
+    cancelPreviousRequest();
+    setSearching(true);
+
+    try {
+      const response = await axios.get(
+        `https://api.github.com/search/repositories?q=${keywords}&sort=stars&order=desc`,
+        {
+          cancelToken: newCancelToken(),
+        }
+      );
+
+      if (response.status === 200) {
+        setResult(response.data.items);
+      }
+    } catch (err) {
+      if (isCancel(err)) return;
+      setResult('An error occured!');
+      console.error(err);
+    }
+
+    setSearching(false);
+  };
+
+  const delayedSearch = React.useCallback(
+    _.debounce((value) => performSearch(value), 700),
+    [performSearch]
+  );
+
+  const handleInputChange = (event) => {
+    const { value } = event.target;
+    setSearch(value);
+    delayedSearch(value);
+  };
+
+  const handleCancel = () => {
+    cancelPreviousRequest();
+    setSearching(false);
+  };
+
   return (
-    <div>
-      {example}
-    </div>
-  )
-}
-export default App
+    <>
+      <input type="text" placeholder="Search..." value={search} onChange={handleInputChange} />
+      <button onClick={handleCancel} disabled={!searching}>
+        Cancel
+      </button>
+      {searching && ' Searching...'}
+      <br />
+      <br />
+      <div>
+        {_.isArray(result) ? (
+          <>
+            <h3>Github repositories:</h3>
+            <ul>
+              {result.map((item, index) => (
+                <li key={index}>
+                  <a href={item.html_url} target="_blank" rel="noopener noreferrer">{item.name}</a>
+                </li>
+              ))}
+            </ul>
+          </>
+        ) : (
+          result
+        )}
+      </div>
+    </>
+  );
+};
+export default App;

example/yarn.lock

@@ -2154,6 +2154,13 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 axobject-query@^2.0.2:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -4590,7 +4597,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.10.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
   integrity sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==