feat!: use react-use, instead of use

examples/nextjs-ssr/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@shined/use": "workspace:*",
+    "@shined/react-use": "workspace:*",
     "next": "14.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

examples/nextjs-ssr/src/app/client.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useBrowserMemory, useCircularList, useElementSize, useTitle } from '@shined/use'
+import { useBrowserMemory, useCircularList, useElementSize, useTitle } from '@shined/react-use'
 
 export function Client() {
   const { width, height } = useElementSize('#el-textarea')

examples/vite-unocss-csr/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@shined/use": "workspace:*",
+    "@shined/react-use": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "braces": ">=3.0.3"

examples/vite-unocss-csr/src/parts/part-five.tsx

@@ -9,7 +9,7 @@ import {
   useSafeState,
   useScrollLock,
   useStateHistory,
-} from '@shined/use'
+} from '@shined/react-use'
 
 const addTen = (a: number) => {
   return new Promise<number>((resolve) => {

examples/vite-unocss-csr/src/parts/part-four.tsx

@@ -10,7 +10,7 @@ import {
   useSpringValue,
   useTimeAgo,
   useTitle,
-} from '@shined/use'
+} from '@shined/react-use'
 
 export const PartFour = () => {
   const divRef = useRef<HTMLDivElement | null>(null)

examples/vite-unocss-csr/src/parts/part-one.tsx

@@ -15,7 +15,7 @@ import {
   useMousePressed,
   useScroll,
   useWindowScroll,
-} from '@shined/use'
+} from '@shined/react-use'
 
 export function PartOne() {
   const hoverRef = useRef<HTMLDivElement>(null)

examples/vite-unocss-csr/src/parts/part-six.tsx

@@ -6,7 +6,7 @@ import {
   useKeyUp,
   useLongPress,
   useUrlSearchParams,
-} from '@shined/use'
+} from '@shined/react-use'
 import { useRef } from 'react'
 
 export const PartSix = () => {

examples/vite-unocss-csr/src/parts/part-three.tsx

@@ -9,7 +9,7 @@ import {
   useNetwork,
   useSafeState,
   useTextSelection,
-} from '@shined/use'
+} from '@shined/react-use'
 
 export const PartThree = () => {
   const fullscreenRef = useRef<HTMLDivElement>(null)

examples/vite-unocss-csr/src/parts/part-two.tsx

@@ -9,7 +9,7 @@ import {
   useMouse,
   useStyleTag,
   useTextDirection,
-} from '@shined/use'
+} from '@shined/react-use'
 
 export const PartTwo = () => {
   const { x, y } = useMouse({ type: 'client' })

examples/vite-unocss-csr/src/playground.tsx

@@ -16,7 +16,7 @@ import {
   useTargetElement,
   useToggle,
   useUserMedia,
-} from '@shined/use'
+} from '@shined/react-use'
 
 export const Playground = () => {
   const [showChild, toggle] = useToggle(true)

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@shined/use",
+  "name": "@shined/react-use",
   "type": "module",
   "version": "0.0.0-alpha.0",
   "packageManager": "[email protected]",
@@ -23,6 +23,7 @@
   },
   "keywords": [
     "react",
+    "react-use",
     "react-hooks",
     "shined"
   ],

readme.md

@@ -1,4 +1,4 @@
-# @shined/use
+# @shined/react-use
 
 ![Static Badge](https://img.shields.io/badge/Checked_with-Biome-60a5fa?style=flat&logo=biome)
 

src/create-single-loading/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, Zone, wait as mockFetch } from '@/components'
-import { createSingleLoading } from '@shined/use'
+import { createSingleLoading } from '@shined/react-use'
 
 const pageLoading = createSingleLoading()
 

src/use-active-element/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, Input, KeyValue, Zone } from '@/components'
-import { useActiveElement } from '@shined/use'
+import { useActiveElement } from '@shined/react-use'
 
 export function App() {
   const activeElement = useActiveElement()

src/use-adaptive-textarea/demo.tsx

@@ -1,5 +1,5 @@
 import { Card, KeyValue } from '@/components'
-import { useAdaptiveTextarea, useCounter, useLoremIpsum } from '@shined/use'
+import { useAdaptiveTextarea, useCounter, useLoremIpsum } from '@shined/react-use'
 
 export function App() {
   const lorem = useLoremIpsum()

src/use-async-effect/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, Zone } from '@/components'
-import { useAsyncEffect, useCounter, useToggle } from '@shined/use'
+import { useAsyncEffect, useCounter, useToggle } from '@shined/react-use'
 
 import type { SetIntervalReturn } from '../utils/basic'
 

src/use-async-fn/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, Zone, wait as mockFetch } from '@/components'
-import { useAsyncFn } from '@shined/use'
+import { useAsyncFn } from '@shined/react-use'
 
 export function App() {
   const fetchFn = useAsyncFn(() => mockFetch(300))

src/use-async-lock/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, OTP, Zone, wait as mockFetch } from '@/components'
-import { useAsyncFn, useAsyncLock, useCounter, useSafeState } from '@shined/use'
+import { useAsyncFn, useAsyncLock, useCounter, useSafeState } from '@shined/react-use'
 
 export function App() {
   const [data, setData] = useSafeState<string>('none')

src/use-async-update-effect/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, Zone } from '@/components'
-import { useAsyncUpdateEffect, useCounter, useToggle } from '@shined/use'
+import { useAsyncUpdateEffect, useCounter, useToggle } from '@shined/react-use'
 
 import type { SetIntervalReturn } from '../utils/basic'
 

src/use-battery/demo.tsx

@@ -1,5 +1,5 @@
 import { Card, KeyValue } from '@/components'
-import { useBattery } from '@shined/use'
+import { useBattery } from '@shined/react-use'
 
 export function App() {
   const battery = useBattery()

src/use-before-unload/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, Zone } from '@/components'
-import { useBeforeUnload, useToggle } from '@shined/use'
+import { useBeforeUnload, useToggle } from '@shined/react-use'
 
 export function App() {
   const [show, toggle] = useToggle(true)

src/use-bluetooth/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, Input, KeyValue, Zone } from '@/components'
-import { useBluetooth, useControlledComponent, useSetState } from '@shined/use'
+import { useBluetooth, useControlledComponent, useSetState } from '@shined/react-use'
 import { useEffect } from 'react'
 
 export function App() {

src/use-breakpoints/demo.tsx

@@ -1,5 +1,5 @@
 import { Card, KeyValue } from '@/components'
-import { useBreakpoints, useEventListener, useMount, useSafeState } from '@shined/use'
+import { useBreakpoints, useEventListener, useMount, useSafeState } from '@shined/react-use'
 
 const breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280, xxl: 1536 }
 

src/use-browser-memory/demo.tsx

@@ -1,5 +1,5 @@
 import { Card, KeyValue, Zone } from '@/components'
-import { useBrowserMemory } from '@shined/use'
+import { useBrowserMemory } from '@shined/react-use'
 
 const size = (v: number) => `${(v / 1024 / 1024).toFixed(2)} MB`
 

src/use-circular-list/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue } from '@/components'
-import { useCircularList } from '@shined/use'
+import { useCircularList } from '@shined/react-use'
 
 const fruits = ['🍌 banner', '🍎 apple', '🍇 grape', '🍉 watermelon', '🍊 orange']
 

src/use-clamp/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, Zone } from '@/components'
-import { useClamp, useCounter } from '@shined/use'
+import { useClamp, useCounter } from '@shined/react-use'
 
 export function App() {
   const [max, maxActions] = useCounter(10)

src/use-click-outside/demo.tsx

@@ -1,5 +1,5 @@
 import { Card, KeyValue } from '@/components'
-import { useClickOutside, useCounter } from '@shined/use'
+import { useClickOutside, useCounter } from '@shined/react-use'
 import { useRef } from 'react'
 
 const cls =

src/use-clipboard-items/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card } from '@/components'
-import { useClipboardItems } from '@shined/use'
+import { useClipboardItems } from '@shined/react-use'
 
 export function App() {
   const clipboard = useClipboardItems()

src/use-clipboard/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, Input, KeyValue } from '@/components'
-import { useClipboard, useControlledComponent } from '@shined/use'
+import { useClipboard, useControlledComponent } from '@shined/react-use'
 
 const hash = () => Math.random().toString(36).slice(2, 8).toUpperCase()
 

src/use-cloned/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, Zone } from '@/components'
-import { useCloned, useSafeState } from '@shined/use'
+import { useCloned, useSafeState } from '@shined/react-use'
 
 export function App() {
   const [state, setState] = useSafeState({

src/use-controlled-component/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, Input } from '@/components'
-import { useControlledComponent, useUnmount } from '@shined/use'
+import { useControlledComponent, useUnmount } from '@shined/react-use'
 import { Toaster, toast } from 'react-hot-toast'
 
 export function App() {

src/use-countdown/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, Input, KeyValue, Zone } from '@/components'
-import { useCountdown, useSafeState } from '@shined/use'
+import { useCountdown, useSafeState } from '@shined/react-use'
 
 export function App() {
   const ms = useCountdown(() => new Date('2030-01-01T00:00:00Z'))

src/use-counter/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, Zone } from '@/components'
-import { useCounter } from '@shined/use'
+import { useCounter } from '@shined/react-use'
 
 export function App() {
   const [count, action, { max, min, initialCount }] = useCounter(1, { max: 20, min: 0 })

src/use-creation/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, Zone } from '@/components'
-import { useCounter, useCreation, useUnmount } from '@shined/use'
+import { useCounter, useCreation, useUnmount } from '@shined/react-use'
 import { useEffect } from 'react'
 import { Toaster, toast } from 'react-hot-toast'
 

src/use-css-var/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, Zone } from '@/components'
-import { useCssVar, useLoremIpsum } from '@shined/use'
+import { useCssVar, useLoremIpsum } from '@shined/react-use'
 
 const random256 = () => Math.floor(Math.random() * 256)
 const randomColor = () => `rgb(${random256()}, ${random256()}, ${random256()})`

src/use-date-format/demo.tsx

@@ -1,5 +1,5 @@
 import { Card, KeyValue, LabelInput, Zone } from '@/components'
-import { useControlledComponent, useDateFormat, useNow } from '@shined/use'
+import { useControlledComponent, useDateFormat, useNow } from '@shined/react-use'
 
 export function App() {
   const now = useNow()

src/use-debounced-effect/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, Zone } from '@/components'
-import { useCounter, useDebouncedEffect, useUnmount } from '@shined/use'
+import { useCounter, useDebouncedEffect, useUnmount } from '@shined/react-use'
 import { Toaster, toast } from 'react-hot-toast'
 
 const wait = 300

src/use-debounced-fn/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, Zone } from '@/components'
-import { useCounter, useDebouncedFn } from '@shined/use'
+import { useCounter, useDebouncedFn } from '@shined/react-use'
 
 const wait = 300
 

src/use-deep-compare-effect/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, Zone } from '@/components'
-import { useDeepCompareEffect, useUnmount } from '@shined/use'
+import { useDeepCompareEffect, useUnmount } from '@shined/react-use'
 import { useEffect, useState } from 'react'
 import { Toaster, toast } from 'react-hot-toast'
 

src/use-deep-compare-effect/index.mdx

@@ -4,7 +4,7 @@ import { HooksType } from '@/components'
 
 <HooksType category="Lifecycle" lowLevel />
 
-A React Hook like [React.useEffect](https://react.dev/reference/react/useEffect), but with [deep comparison](https://github.com/sheinsight/use/blob/main/src/utils/equal.ts#L29) of dependencies.
+A React Hook like [React.useEffect](https://react.dev/reference/react/useEffect), but with [deep comparison](https://github.com/sheinsight/react-use/blob/main/src/utils/equal.ts#L29) of dependencies.
 
 ## Demo
 

src/use-deep-compare-layout-effect/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, Zone } from '@/components'
-import { useDeepCompareLayoutEffect, useUnmount } from '@shined/use'
+import { useDeepCompareLayoutEffect, useUnmount } from '@shined/react-use'
 import { useEffect, useState } from 'react'
 import { Toaster, toast } from 'react-hot-toast'
 

src/use-device-list/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, Zone } from '@/components'
-import { useDeviceList } from '@shined/use'
+import { useDeviceList } from '@shined/react-use'
 
 export function App() {
   const device = useDeviceList({ requestPermissions: true })

src/use-document-leave/demo.tsx

@@ -1,5 +1,5 @@
 import { Card, KeyValue } from '@/components'
-import { useDocumentLeave } from '@shined/use'
+import { useDocumentLeave } from '@shined/react-use'
 
 export function App() {
   const isUserLeaveDocument = useDocumentLeave()

src/use-document-visibility/demo.tsx

@@ -1,5 +1,5 @@
 import { Card, KeyValue } from '@/components'
-import { useDocumentVisibility, useTitle } from '@shined/use'
+import { useDocumentVisibility, useTitle } from '@shined/react-use'
 
 export function App() {
   const visibility = useDocumentVisibility()

src/use-draggable/demo.tsx

@@ -1,5 +1,5 @@
 import { Card } from '@/components'
-import { useDraggable } from '@shined/use'
+import { useDraggable } from '@shined/react-use'
 
 export function App() {
   const draggable = useDraggable('#drag-me', {

src/use-drop-zone/demo.tsx

@@ -1,5 +1,5 @@
 import { Card, KeyValue, Zone } from '@/components'
-import { useDropZone } from '@shined/use'
+import { useDropZone } from '@shined/react-use'
 
 export function App() {
   const { isOverDropZone, files } = useDropZone('#drop-zone')

src/use-dynamic-list/demo.tsx

@@ -1,6 +1,6 @@
 import { Button, Card, Input, Zone } from '@/components'
 import { useAutoAnimate } from '@formkit/auto-animate/react'
-import { useDynamicList } from '@shined/use'
+import { useDynamicList } from '@shined/react-use'
 
 export function App() {
   const [containerRef] = useAutoAnimate()

src/use-effect-once/demo.tsx

@@ -1,5 +1,5 @@
 import { Card, KeyValue } from '@/components'
-import { useCounter, useEffectOnce } from '@shined/use'
+import { useCounter, useEffectOnce } from '@shined/react-use'
 
 export function App() {
   const [count, actions] = useCounter(0)

src/use-element-bounding/demo.tsx

@@ -1,5 +1,5 @@
 import { Card } from '@/components'
-import { useElementBounding } from '@shined/use'
+import { useElementBounding } from '@shined/react-use'
 
 export function App() {
   const [bounding, _update] = useElementBounding('#el-bounding')

src/use-element-by-point/demo.tsx

@@ -1,5 +1,5 @@
 import { Button, Card, KeyValue, Zone } from '@/components'
-import { useElementBounding, useElementByPoint, useMouse, useStyleTag } from '@shined/use'
+import { useElementBounding, useElementByPoint, useMouse, useStyleTag } from '@shined/react-use'
 
 export function App() {
   const { x, y, ...mouseControls } = useMouse({ type: 'client' })