Merge pull request #6 from sheinsight/feat/use-form

feat: add useForm

docs/docs/components/main.tsx

@@ -6,10 +6,10 @@ export function Main() {
   const navigate = useNavigate()
   // const isDark = useDark()
 
-  const [intro, started, reference] = [
-    useRoutePath('/docs/introduction'),
+  const [start, reference, github] = [
     useRoutePath('/docs/get-started'),
     useRoutePath('/reference'),
+    useRoutePath('/docs/overview'),
   ]
 
   return (
@@ -27,28 +27,28 @@ export function Main() {
         theme={isDark ? 'one-dark-pro' : 'one-light'}
       /> */}
       <div className="flex gap-4 mt-8 md:gap-6 items-center">
-        <Button className="md:w-120px" onClick={() => navigate(intro)}>
-          {t('homepage.introduction')}
+        <Button className="md:w-120px" onClick={() => navigate(start)}>
+          {t('homepage.get-started')}
         </Button>
         <a
           className="user-link"
           onClick={(e) => {
             e.preventDefault()
-            navigate(started)
+            navigate(reference)
           }}
-          href={started}
+          href={reference}
         >
-          {t('homepage.get-started')}
+          {t('homepage.reference')}
         </a>
         <a
           className="user-link"
           onClick={(e) => {
             e.preventDefault()
-            navigate(reference)
+            navigate(github)
           }}
-          href={reference}
+          href={github}
         >
-          {t('homepage.reference')}
+          {t('homepage.github')}
         </a>
       </div>
     </div>

docs/docs/en/docs/get-started.mdx

@@ -1,35 +1,78 @@
-# 🏃 Get Started
+# 🏃 Get Started \{#get-started}
 
-## 💬 Preface
+import { ReactUseIcon } from '@/components'
 
-To address a variety of complex and diverse business scenarios, this library provides a large number of **high-quality, efficient** React Hooks to help you build applications faster. It covers aspects ranging from basic `effect handling`, `data fetching`, `state management`, `UI state`, `utility tools` to more business-oriented uses like `browser API`, `common scenes`, `high-frequency business logic`, and more.
+<ReactUseIcon />
 
-**Please, don't panic. Not all Hooks need to be mastered.**
+<div className="flex gap-2 mt-4">
+  <img
+  alt="NPM Version"
+  src="https://img.shields.io/npm/v/%40shined%2Freact-use?style=flat&labelColor=%23ffffff&color=%232e8555"
+  />
+  <img src="https://img.shields.io/badge/Checked_with-Biome-60a5fa?style=flat&logo=biome" alt="Biome Badge" />
+  <img src="https://pkg-size.dev/badge/bundle/125650" alt="Version Badge" />
+</div>
 
-Next, this article will guide you to quickly understand the main contents of this library, giving you a general overview. This way, you can quickly recall in actual development scenarios that there might be corresponding Hooks here to solve problems, and then you can refer to the specific usage documentation.
+`@shined/react-use` aims to **reshape the new programming paradigm of React development**. It enhances development efficiency, fosters better programming habits, and reduces the reliance on `useEffect` and `useState` by offering a multitude of high-quality, semantic Hooks. It encourages developers to gradually adapt to a React development (programming) paradigm that prioritizes '**Hooks first**'.
 
-## 🔖 Categorized by Type
+Fundamentally, it's a **SSR (Server-Side Rendering) friendly**, **comprehensive**, and **highly optimized** React Hooks library that provides flexible and efficient Hook solutions, entirely developed in **TypeScript**, and comes with interactive documentation filled with rich examples 🔥.
 
-This library organizes various Hooks **by type**, divided into the following nine parts, and the homepage navigation is also based on this classification:
+It's primarily inspired by [VueUse](https://vueuse.org/), while also drawing from [react-use](https://github.com/streamich/react-use), [ahooks](https://ahooks.js.org/), and many other outstanding libraries within the community. Special thanks to the open-source community, especially the authors of the aforementioned libraries, for their exceptional work and inspiration.
 
-- **Lifecycle**: Related to React's lifecycle, such as `useMount`, `useUnmount`, `useUpdateEffect`, etc.
-- **State**: Related to state management, such as `useSafeState`, `useRafState`, `useSetState`, etc., and derived states.
-- **Element**: Related to DOM elements, such as `useElementSize`, `useFocus`, `useScroll`, `useDropZone`, etc.
-- **Browser**: Related to browser API, such as `useClipboard`, `useFullscreen`, `useBattery`, `useBluetooth`, `useEyeDropper`, `useResizeObserver`, etc.
-- **Sensors**: Related to sensors, such as `useKeyPress`, `useGeolocation`, `useFps`, `useMouse`, `useUserIdle`, etc.
-- **Animation**: Not for animations but related to timers, animations, such as `useIntervalFn`, `useTimeoutFn`, `useRafFn`, etc.
-- **Network**: Related to networking, currently quite limited, only `useOnline` and `useNetwork`.
-- **Utilities**: Some utility tools, such as `useAsyncFn`, `useCountdown`, `useDateFormat`, `useDebouncedFn`, `useRetryFn`, `useTimeAgo`, `useEventBus`, etc.
-- **ProUtilities**: Strong business scenarios, such as `useQuery`, `useDynamicList`, `usePagination`, `useVirtualList`, etc.
+## 🚀 Features \{#features}
 
-## 🍱 Categorized by Functionality
+- **Flexibility**: [Dependencies Collection](/docs/features/dependencies-collection)、[ElementTarget](/docs/features/element-target), [Ref Getter](/docs/features/ref-getter), [Pausable](/docs/features/pausable), and more.
+- **Tree-shakable**: Designed and delivered with [ESM](https://nodejs.org/api/esm.html), import only what you need.
+- **Interactive Documentation**: Interactive documentation with live examples and [Playground](https://react-online.vercel.app/#code=aW1wb3J0IHsgY3JlYXRlIH0gZnJvbSAnQHNoaW5lZC9yZWFjdGl2ZScKaW1wb3J0IHsgY3JlYXRlUm9vdCB9IGZyb20gJ3JlYWN0LWRvbS9jbGllbnQnCmltcG9ydCB7IHVzZU1vdXNlLCB1c2VSZWFjdGl2ZSB9IGZyb20gJ0BzaGluZWQvcmVhY3QtdXNlJwoKCmZ1bmN0aW9uIEFwcCgpIHsKICBjb25zdCB7IHgsIHkgfSA9IHVzZU1vdXNlKCkKICBjb25zdCBbeyBjb3VudCB9LCBtdXRhdGVdID0gdXNlUmVhY3RpdmUoeyBjb3VudDogMCB9LCB7IGNyZWF0ZSB9KQoKICBjb25zdCBhZGRPbmUgPSAoKSA9PiBtdXRhdGUuY291bnQrKwoKICByZXR1cm4gKAogICAgPGRpdj4KICAgICAgPGRpdj4oeCwgeSk6ICh7eH0sIHt5fSk8L2Rpdj4KICAgICAgPGJ1dHRvbiBvbkNsaWNrPXthZGRPbmV9PkNvdW50OiB7Y291bnR9PC9idXR0b24%2BCiAgICA8L2Rpdj4KICApCn0KCmNyZWF0ZVJvb3QoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3Jvb3QnKSEpLnJlbmRlcig8QXBwIC8%2BKQo%3D).
+- **Lightweight**: Boasts [zero dependencies](https://github.com/sheinsight/react-use/blob/main/package.json).
+- **SSR-friendly**: Ensures that all Hooks are compatible with Server-side Rendering (SSR).
+- **First-class TypeScript Support**: Written in [TypeScript](https://www.typescriptlang.org/) with well-named type definitions and [JSDoc](https://jsdoc.app/) Comment.
+- **~~Comprehensive Testing~~**: (Coming soon...)
 
-This library organizes various Hooks **by functionality and application scenarios**, roughly divided into the following parts:
+Visit the [Get Started](/docs/get-started) section to explore how it can be integrated into your project.
 
-- **Basic Hooks**: Includes Hooks for handling **side effects**, **state management**, and other basic needs, which every React developer should master, such as `useMount`, `useUnmount`, `useUpdateEffect`, `useSafeState`, etc.
-- **Data Handling and Fetching**: Provides Hooks for everything from simple data fetching to complex data handling logic, supporting advanced features like polling refresh, automatic requests, caching, etc., making **asynchronous operations** and **data management** simpler, such as `useAsyncFn`, `useQuery`, etc.
-- **UI State Management**: Offers a wealth of Hooks to help manage component states for UI states (like **loading**, **error handling**), enhancing the user experience, such as `useAsyncFn`, `useHover`, `useFocus`, `useRetryFn`, etc.
-- **Browser API**: Provides wrappers for browser APIs, making it more convenient to use the functionalities provided by the browser while supporting detection of browser support situations, and degrading gracefully wherever possible, such as `useClipboard`, `useFullscreen`, `useBattery`, `useBluetooth`, `useEyeDropper`, `useResizeObserver`, etc.
-- **Utility Tools**: Provides a series of **utility tool** Hooks, helping you handle data, events, etc., more conveniently, such as `useEventListener`, `useNow`, `useDateFormat`, `useTimeAgo`, `useCountdown`, `useAsyncLock`, `useEventBus`, etc.
-- **Business Logic Related**: Covers a series of specific business scenarios (like **dynamic lists**, **virtual lists**, **pagination status**) Hooks to help quickly implement complex business logic, such as `useVirtualList`, `useDynamicList`, `usePagination`, etc.
-- **Common Scene Solutions**: Provides a collection of Hooks to solve high-frequency problems, whether it's **performance optimization**, **rate limiting**, or other common issues, such as `useSafeState`, `useRafState`, `useDebouncedFn`, `useThrottledFn`, etc.
+## ⚡️ Optimizations \{#optimizations}
+
+- **Safe State**: Implements a [safe state](/docs/optimization/safe-state) strategy for all stateful Hooks, reducing bugs and unwanted behaviors.
+- **Stable functions**: Every exported function benefits from [stabilization](/docs/optimization/stabilization) by default.
+- **Latest State**: Avoids the expired closure issues by using [latest](/docs/optimization/latest-state) state internally.
+- **Reduced Unnecessary Rerenders**: Use [Pausable](/docs/features/pausable) instance to control the behavior of some Hooks optionally.
+
+## 📦 Installation \{#installation}
+
+Install using your favorite package manager:
+
+import { PackageManagerTabs } from 'rspress/theme'
+
+<PackageManagerTabs
+  command={{
+    npm: 'npm install @shined/react-use',
+    yarn: 'yarn add @shined/react-use',
+    pnpm: 'pnpm add @shined/react-use',
+    bun: 'bun add @shined/react-use',
+  }}
+/>
+
+## 🎨 Usage Examples \{#usage}
+
+Below is an example of how to use the [useAsyncFn](/reference/use-async-fn) Hook:
+
+```tsx
+function App() {
+  const { loading, error, run } = useAsyncFn(fetchData)
+  return (
+    <>
+      <div>{data}</div>
+      <button onClick={run} disabled={loading}>Fetch</button>
+    </>
+  )
+}
+```
+
+import { App } from '@/../../src/use-async-fn/demo'
+
+<App />
+
+Next, it is recommended to read [Getting Started](/docs/get-started) to understand how to use this library.
+
+Then you can proceed to the [Usage Guide](/docs/usage-guide) to learn how to improve existing code, or visit the [Hooks List](/reference) to see all available Hooks.

docs/docs/en/docs/overview.mdx

@@ -0,0 +1,33 @@
+# 🔍 Overview \{#overview}
+
+To address a variety of complex and diverse business scenarios, this library provides a large number of **high-quality, efficient** React Hooks to help you build applications faster. It covers aspects ranging from basic `effect handling`, `data fetching`, `state management`, `UI state`, `utility tools` to more business-oriented uses like `browser API`, `common scenes`, `high-frequency business logic`, and more.
+
+**Please, don't panic. Not all Hooks need to be mastered.**
+
+Next, this article will guide you to quickly understand the main contents of this library, giving you a general overview. This way, you can quickly recall in actual development scenarios that there might be corresponding Hooks here to solve problems, and then you can refer to the specific usage documentation.
+
+## 🔖 Categorized by Type
+
+This library organizes various Hooks **by type**, divided into the following nine parts, and the homepage navigation is also based on this classification:
+
+- **Lifecycle**: Related to React's lifecycle, such as `useMount`, `useUnmount`, `useUpdateEffect`, etc.
+- **State**: Related to state management, such as `useSafeState`, `useRafState`, `useSetState`, etc., and derived states.
+- **Element**: Related to DOM elements, such as `useElementSize`, `useFocus`, `useScroll`, `useDropZone`, etc.
+- **Browser**: Related to browser API, such as `useClipboard`, `useFullscreen`, `useBattery`, `useBluetooth`, `useEyeDropper`, `useResizeObserver`, etc.
+- **Sensors**: Related to sensors, such as `useKeyPress`, `useGeolocation`, `useFps`, `useMouse`, `useUserIdle`, etc.
+- **Animation**: Not for animations but related to timers, animations, such as `useIntervalFn`, `useTimeoutFn`, `useRafFn`, etc.
+- **Network**: Related to networking, currently quite limited, only `useOnline` and `useNetwork`.
+- **Utilities**: Some utility tools, such as `useAsyncFn`, `useCountdown`, `useDateFormat`, `useDebouncedFn`, `useRetryFn`, `useTimeAgo`, `useEventBus`, etc.
+- **ProUtilities**: Strong business scenarios, such as `useQuery`, `useDynamicList`, `usePagination`, `useVirtualList`, etc.
+
+## 🍱 Categorized by Functionality
+
+This library organizes various Hooks **by functionality and application scenarios**, roughly divided into the following parts:
+
+- **Basic Hooks**: Includes Hooks for handling **side effects**, **state management**, and other basic needs, which every React developer should master, such as `useMount`, `useUnmount`, `useUpdateEffect`, `useSafeState`, etc.
+- **Data Handling and Fetching**: Provides Hooks for everything from simple data fetching to complex data handling logic, supporting advanced features like polling refresh, automatic requests, caching, etc., making **asynchronous operations** and **data management** simpler, such as `useAsyncFn`, `useQuery`, etc.
+- **UI State Management**: Offers a wealth of Hooks to help manage component states for UI states (like **loading**, **error handling**), enhancing the user experience, such as `useAsyncFn`, `useHover`, `useFocus`, `useRetryFn`, etc.
+- **Browser API**: Provides wrappers for browser APIs, making it more convenient to use the functionalities provided by the browser while supporting detection of browser support situations, and degrading gracefully wherever possible, such as `useClipboard`, `useFullscreen`, `useBattery`, `useBluetooth`, `useEyeDropper`, `useResizeObserver`, etc.
+- **Utility Tools**: Provides a series of **utility tool** Hooks, helping you handle data, events, etc., more conveniently, such as `useEventListener`, `useNow`, `useDateFormat`, `useTimeAgo`, `useCountdown`, `useAsyncLock`, `useEventBus`, etc.
+- **Business Logic Related**: Covers a series of specific business scenarios (like **dynamic lists**, **virtual lists**, **pagination status**) Hooks to help quickly implement complex business logic, such as `useVirtualList`, `useDynamicList`, `usePagination`, etc.
+- **Common Scene Solutions**: Provides a collection of Hooks to solve high-frequency problems, whether it's **performance optimization**, **rate limiting**, or other common issues, such as `useSafeState`, `useRafState`, `useDebouncedFn`, `useThrottledFn`, etc.