feat: add docs for all hooks

Author: mintsweet

README.md

@@ -18,7 +18,7 @@
 - Written in typescript to achieve good type support.
 - Constantly add new and useful hooks.
 
-## 🌈 Install
+## 🌈 Installation
 
 ```
 $ npm install @mints/hooks
@@ -32,7 +32,11 @@ import { useRequest } from '@mints/hooks';
 
 ## 📃 Hook List
 
-- useRequest
-- useAutoRefresh
-- useOutsideClick
-- useDebounce
+- [useRequest](./docs/use-request.md)
+- [useAutoRefresh](./docs/use-auto-refresh.md)
+- [useOutsideClick](./docs/use-outside-click.md)
+- [useDebounce](./docs/use-debounce.md)
+
+## 🌐 LICENSE
+
+[MIT](./LICENSE)

docs/use-auto-refresh.md

@@ -0,0 +1,49 @@
+# useAutoRefresh
+
+> A hook for automatic refresh.
+
+## Usage
+
+```javascript
+import { useAutoRefresh } from '@mints/hooks';
+
+const Example = () => {
+  const { loading, data } = useAutoRefresh(
+    async () => {
+      const res = await fetch(url).json();
+      return res;
+    },
+    {
+      retryLimit: 5,
+    },
+  );
+
+  if (loading || !data) {
+    return <div>Loading...</div>;
+  }
+
+  if (stoped) {
+    return <div>Automatic Stoped...</div>;
+  }
+
+  return <div>{JSON.stringfiy(data)}</div>;
+};
+```
+
+## API
+
+```typescript
+useAutoRefresh = <T>(
+  request: (signal: AbortSignal) => Promise<T>,
+  option?: {
+    stop?: (data?: T) => boolean;
+    interval?: number;
+    retryLimit?: number;
+  },
+): {
+  loading: boolean;
+  data?: T;
+  error?: unknow;
+  stoped: boolean;
+}
+```

docs/use-debounce.md

@@ -0,0 +1,36 @@
+# useDebounce
+
+> A hook that deal with the debounced value.
+
+## Usage
+
+```javascript
+import { useState } from 'react';
+import { useDebounce } from '@mints/hooks';
+
+const Example = () => {
+  const [value, setValue] = useState('');
+  const debouncedValue = useDebounce(value, { wait: 500 });
+
+  return (
+    <div>
+      <input value={value} onChange={(e) => setValue(e.target.value)} />
+      <span>DebouncedValue: {debouncedValue}</span>
+    </div>
+  );
+};
+```
+
+## API
+
+```typescript
+useDebounce = <T>(
+  value: T,
+  options?: {
+    wait?: number;
+    leading?: boolean;
+    maxWait?: number;
+    trailing?: boolean;
+  },
+): T
+```

docs/use-outside-click.md

@@ -0,0 +1,34 @@
+# useOutsideClick
+
+> A hook that helps you bind click events outside of a specified element.
+
+## Usage
+
+```javascript
+import { useRef } from 'react';
+import { useOutsideClick } from '@mints/hooks';
+
+const Example = () => {
+  const [open, setOpen] = useState(false);
+
+  const ref = useRef(null);
+
+  useOutsideClick(ref, () => setOpen(false));
+
+  return (
+    <div ref={ref}>
+      <span onClick={() => setOpen(true)}>Control</span>
+      {open && <div>Show Something.</div>}
+    </div>
+  );
+};
+```
+
+## API
+
+```typescript
+useOutsideClick = <T>(
+  ref: MutableRefObject<HTMLDivElement | null>,
+  cb: () => void,
+)
+```

docs/use-request.md

@@ -0,0 +1,35 @@
+# useRequest
+
+> A hook for asynchronous requests.
+
+## Usage
+
+```javascript
+import { useRequest } from '@mints/hooks';
+
+const Example = () => {
+  const { loading, data } = useRequest(async () => {
+    const res = await fetch(url).json();
+    return res;
+  }, []);
+
+  if (loading || !data) {
+    return <div>Loading...</div>;
+  }
+
+  return <div>{JSON.stringfiy(data)}</div>;
+};
+```
+
+## API
+
+```typescript
+useRequest = <T>(
+  request: (signal: AbortSignal) => Promise<T>,
+  deps: React.DependencyList = [],
+): {
+  loading: boolean;
+  data?: T;
+  error?: unknow;
+}
+```