Skip to content

Commit 15a2913

Browse files
niqingyangniqingyang
committed
参考 react-use 整理 README.md
1 parent 934fad1 commit 15a2913

File tree

1 file changed

+188
-59
lines changed

1 file changed

+188
-59
lines changed

‎README.md

Lines changed: 188 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,197 @@
1-
# vue-next-use
1+
<div align="center">
2+
<h1>
3+
<br/>
4+
<br/>
5+
👍
6+
<br />
7+
vue-next-use
8+
<br />
9+
<sup style="font-size: 16px; font-weight: 300;">
10+
a vue3 <a href="https://github.com/streamich/react-use" target="_blank">react-use</a> implementation
11+
</sup>
12+
<br />
13+
<br />
14+
<br />
15+
</h1>
16+
<sup>
17+
<br />
18+
<br />
19+
<a href="https://www.npmjs.com/package/vue-next-use">
20+
<img src="https://img.shields.io/npm/v/vue-next-use.svg" alt="npm package" />
21+
</a>
22+
<!--
23+
<a href="https://www.npmjs.com/package/vue-next-use">
24+
<img src="https://img.shields.io/npm/dm/vue-next-use.svg" alt="npm downloads" />
25+
</a>
26+
-->
27+
<a href="http://niqingyang.github.io/vue-next-use">
28+
<img src="https://img.shields.io/badge/demos-🚀-yellow.svg" alt="demos" />
29+
</a>
30+
<br />
31+
</sup>
32+
<br />
33+
<br />
34+
<br />
35+
<br />
36+
<pre>npm i <a href="https://www.npmjs.com/package/vue-next-use">vue-next-use</a></pre>
37+
<br />
38+
<br />
39+
<br />
40+
<br />
41+
<br />
42+
</div>
243

3-
a vue3 [react-use](https://github.com/streamich/react-use) implementation - it is under active development, and the interface may change greatly
44+
- [**Sensors**](./docs/Sensors.md)
45+
- [`useBattery`](./docs/useBattery.md) &mdash; tracks device battery state. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/sensors-usebattery--demo)
46+
- [`useGeolocation`](./docs/useGeolocation.md) &mdash; tracks geo location state of user's device. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/sensors-usegeolocation--demo)
47+
- [`useHover` and `useHoverDirty`](./docs/useHover.md) &mdash; tracks mouse hover state of some element. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/sensors-usehover--demo)
48+
- [`useHash`](./docs/useHash.md) &mdash; tracks location hash value. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/sensors-usehash--demo)
49+
- [`useIdle`](./docs/useIdle.md) &mdash; tracks whether user is being inactive.
50+
- [`useIntersection`](./docs/useIntersection.md) &mdash; tracks an HTML element's intersection. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/sensors-useintersection--demo)
51+
- [`useKey`](./docs/useKey.md), [`useKeyPress`](./docs/useKeyPress.md), [`useKeyboardJs`](./docs/useKeyboardJs.md), and [`useKeyPressEvent`](./docs/useKeyPressEvent.md) &mdash; track keys. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/sensors-usekeypressevent--demo)
52+
- [`useLocation`](./docs/useLocation.md) and [`useSearchParam`](./docs/useSearchParam.md) &mdash; tracks page navigation bar location state.
53+
- [`useLongPress`](./docs/useLongPress.md) &mdash; tracks long press gesture of some element.
54+
- [`useMedia`](./docs/useMedia.md) &mdash; tracks state of a CSS media query. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/sensors-usemedia--demo)
55+
- [`useMediaDevices`](./docs/useMediaDevices.md) &mdash; tracks state of connected hardware devices.
56+
- [`useMotion`](./docs/useMotion.md) &mdash; tracks state of device's motion sensor.
57+
- [`useMouse` and `useMouseHovered`](./docs/useMouse.md) &mdash; tracks state of mouse position. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/sensors-usemouse--docs)
58+
- [`useMouseWheel`](./docs/useMouseWheel.md) &mdash; tracks deltaY of scrolled mouse wheel. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/sensors-usemousewheel--docs)
59+
- [`useNetworkState`](./docs/useNetworkState.md) &mdash; tracks the state of browser's network connection. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/sensors-usenetworkstate--demo)
60+
- [`useOrientation`](./docs/useOrientation.md) &mdash; tracks state of device's screen orientation.
61+
- [`usePageLeave`](./docs/usePageLeave.md) &mdash; triggers when mouse leaves page boundaries.
62+
- [`useScratch`](./docs/useScratch.md) &mdash; tracks mouse click-and-scrub state.
63+
- [`useScroll`](./docs/useScroll.md) &mdash; tracks an HTML element's scroll position. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/sensors-usescroll--docs)
64+
- [`useScrolling`](./docs/useScrolling.md) &mdash; tracks whether HTML element is scrolling.
65+
- [`useStartTyping`](./docs/useStartTyping.md) &mdash; detects when user starts typing.
66+
- [`useWindowScroll`](./docs/useWindowScroll.md) &mdash; tracks `Window` scroll position. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/sensors-usewindowscroll--docs)
67+
- [`useWindowSize`](./docs/useWindowSize.md) &mdash; tracks `Window` dimensions. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/sensors-usewindowsize--demo)
68+
- [`useMeasure`](./docs/useMeasure.md) and [`useSize`](./docs/useSize.md) &mdash; tracks an HTML element's dimensions. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/sensors-usemeasure--demo)
69+
- [`createBreakpoint`](./docs/createBreakpoint.md) &mdash; tracks `innerWidth`
70+
- [`useScrollbarWidth`](./docs/useScrollbarWidth.md) &mdash; detects browser's native scrollbars width. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/sensors-usescrollbarwidth--demo)
71+
<br/>
72+
<br/>
73+
- [**UI**](./docs/UI.md)
74+
- [`useAudio`](./docs/useAudio.md) &mdash; plays audio and exposes its controls. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/ui-useaudio--demo)
75+
- [`useClickAway`](./docs/useClickAway.md) &mdash; triggers callback when user clicks outside target area.
76+
- [`useCss`](./docs/useCss.md) &mdash; dynamically adjusts CSS.
77+
- [`useDrop` and `useDropArea`](./docs/useDrop.md) &mdash; tracks file, link and copy-paste drops.
78+
- [`useFullscreen`](./docs/useFullscreen.md) &mdash; display an element or video full-screen. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/ui-usefullscreen--demo)
79+
- [`useSlider`](./docs/useSlider.md) &mdash; provides slide behavior over any HTML element. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/ui-useslider--demo)
80+
- [`useSpeech`](./docs/useSpeech.md) &mdash; synthesizes speech from a text string. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/ui-usespeech--demo)
81+
- [`useVibrate`](./docs/useVibrate.md) &mdash; provide physical feedback using the [Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API). [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/ui-usevibrate--demo)
82+
- [`useVideo`](./docs/useVideo.md) &mdash; plays video, tracks its state, and exposes playback controls. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/ui-usevideo--demo)
83+
<br/>
84+
<br/>
85+
- [**Animations**](./docs/Animations.md)
86+
- [`useRaf`](./docs/useRaf.md) &mdash; re-renders component on each `requestAnimationFrame`.
87+
- [`useInterval`](./docs/useInterval.md) and [`useHarmonicIntervalFn`](./docs/useHarmonicIntervalFn.md) &mdash; re-renders component on a set interval using `setInterval`.
88+
- [`useSpring`](./docs/useSpring.md) &mdash; interpolates number over time according to spring dynamics.
89+
- [`useTimeout`](./docs/useTimeout.md) &mdash; re-renders component after a timeout.
90+
- [`useTimeoutFn`](./docs/useTimeoutFn.md) &mdash; calls given function after a timeout. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/animation-usetimeoutfn--demo)
91+
- [`useTween`](./docs/useTween.md) &mdash; re-renders component, while tweening a number from 0 to 1. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/animation-usetween--easing-demo)
92+
- [`useUpdate`](./docs/useUpdate.md) &mdash; returns a callback, which re-renders component when called.
93+
<br/>
94+
<br/>
95+
- [**Side-effects**](./docs/Side-effects.md)
96+
- [`useAsync`](./docs/useAsync.md), [`useAsyncFn`](./docs/useAsyncFn.md), and [`useAsyncRetry`](./docs/useAsyncRetry.md) &mdash; resolves an `async` function.
97+
- [`useBeforeUnload`](./docs/useBeforeUnload.md) &mdash; shows browser alert when user try to reload or close the page.
98+
- [`useCookie`](./docs/useCookie.md) &mdash; provides way to read, update and delete a cookie. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/side-effects-usecookie--demo)
99+
- [`useCopyToClipboard`](./docs/useCopyToClipboard.md) &mdash; copies text to clipboard.
100+
- [`useDebounce`](./docs/useDebounce.md) &mdash; debounces a function. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/side-effects-usedebounce--demo)
101+
- [`useError`](./docs/useError.md) &mdash; error dispatcher. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/side-effects-useerror--demo)
102+
- [`useFavicon`](./docs/useFavicon.md) &mdash; sets favicon of the page.
103+
- [`useLocalStorage`](./docs/useLocalStorage.md) &mdash; manages a value in `localStorage`.
104+
- [`useLockBodyScroll`](./docs/useLockBodyScroll.md) &mdash; lock scrolling of the body element.
105+
- [`useRafLoop`](./docs/useRafLoop.md) &mdash; calls given function inside the RAF loop.
106+
- [`useSessionStorage`](./docs/useSessionStorage.md) &mdash; manages a value in `sessionStorage`.
107+
- [`useThrottle` and `useThrottleFn`](./docs/useThrottle.md) &mdash; throttles a function. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/side-effects-usethrottle--demo)
108+
- [`useTitle`](./docs/useTitle.md) &mdash; sets title of the page.
109+
- [`usePermission`](./docs/usePermission.md) &mdash; query permission status for browser APIs.
110+
<br/>
111+
<br/>
112+
- [**Lifecycles**](./docs/Lifecycles.md)
113+
- [`useEffectOnce`](./docs/useEffectOnce.md) &mdash; a modified [`useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect) hook that only runs once.
114+
- [`useEvent`](./docs/useEvent.md) &mdash; subscribe to events.
115+
- [`useLifecycles`](./docs/useLifecycles.md) &mdash; calls `mount` and `unmount` callbacks.
116+
- [`useMountedState`](./docs/useMountedState.md) and [`useUnmountPromise`](./docs/useUnmountPromise.md) &mdash; track if component is mounted.
117+
- [`usePromise`](./docs/usePromise.md) &mdash; resolves promise only while component is mounted.
118+
- [`useLogger`](./docs/useLogger.md) &mdash; logs in console as component goes through life-cycles.
119+
- [`useMount`](./docs/useMount.md) &mdash; calls `mount` callbacks.
120+
- [`useUnmount`](./docs/useUnmount.md) &mdash; calls `unmount` callbacks.
121+
- [`useUpdateEffect`](./docs/useUpdateEffect.md) &mdash; run an `effect` only on updates.
122+
- [`useIsomorphicLayoutEffect`](./docs/useIsomorphicLayoutEffect.md) &mdash; `useLayoutEffect` that does not show warning when server-side rendering.
123+
- [`useDeepCompareEffect`](./docs/useDeepCompareEffect.md), [`useShallowCompareEffect`](./docs/useShallowCompareEffect.md), and [`useCustomCompareEffect`](./docs/useCustomCompareEffect.md) &mdash; run an `effect` depending on deep comparison of its dependencies
124+
<br/>
125+
<br/>
126+
- [**State**](./docs/State.md)
127+
- [`createMemo`](./docs/createMemo.md) &mdash; factory of memoized hooks.
128+
- [`createReducer`](./docs/createReducer.md) &mdash; factory of reducer hooks with custom middleware.
129+
- [`createReducerContext`](./docs/createReducerContext.md) and [`createStateContext`](./docs/createStateContext.md) &mdash; factory of hooks for a sharing state between components.
130+
- [`useDefault`](./docs/useDefault.md) &mdash; returns the default value when state is `null` or `undefined`.
131+
- [`useGetSet`](./docs/useGetSet.md) &mdash; returns state getter `get()` instead of raw state.
132+
- [`useGetSetState`](./docs/useGetSetState.md) &mdash; as if [`useGetSet`](./docs/useGetSet.md) and [`useSetState`](./docs/useSetState.md) had a baby.
133+
- [`useLatest`](./docs/useLatest.md) &mdash; returns the latest state or props
134+
- [`usePrevious`](./docs/usePrevious.md) &mdash; returns the previous state or props. [![][img-demo]](https://codesandbox.io/s/fervent-galileo-krgx6)
135+
- [`usePreviousDistinct`](./docs/usePreviousDistinct.md) &mdash; like `usePrevious` but with a predicate to determine if `previous` should update.
136+
- [`useObservable`](./docs/useObservable.md) &mdash; tracks latest value of an `Observable`.
137+
- [`useRafState`](./docs/useRafState.md) &mdash; creates `setState` method which only updates after `requestAnimationFrame`. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/state-userafstate--demo)
138+
- [`useSetState`](./docs/useSetState.md) &mdash; creates `setState` method which works like `this.setState`. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/state-usesetstate--demo)
139+
- [`useStateList`](./docs/useStateList.md) &mdash; circularly iterates over an array. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/state-usestatelist--demo)
140+
- [`useToggle` and `useBoolean`](./docs/useToggle.md) &mdash; tracks state of a boolean. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/state-usetoggle--demo)
141+
- [`useCounter` and `useNumber`](./docs/useCounter.md) &mdash; tracks state of a number. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/state-usecounter--demo)
142+
- [`useList`](./docs/useList.md) ~and [`useUpsert`](./docs/useUpsert.md)~ &mdash; tracks state of an array. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/state-uselist--demo)
143+
- [`useMap`](./docs/useMap.md) &mdash; tracks state of an object. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/state-usemap--demo)
144+
- [`useSet`](./docs/useSet.md) &mdash; tracks state of a Set. [![][img-demo]](https://codesandbox.io/s/bold-shtern-6jlgw)
145+
- [`useQueue`](./docs/useQueue.md) &mdash; implements simple queue.
146+
- [`useStateValidator`](./docs/useStateValidator.md) &mdash; tracks state of an object. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/state-usestatevalidator--demo)
147+
- [`useStateWithHistory`](./docs/useStateWithHistory.md) &mdash; stores previous state values and provides handles to travel through them. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/state-usestatewithhistory--demo)
148+
- [`useMultiStateValidator`](./docs/useMultiStateValidator.md) &mdash; alike the `useStateValidator`, but tracks multiple states at a time. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/state-usemultistatevalidator--demo)
149+
- [`useMediatedState`](./docs/useMediatedState.md) &mdash; like the regular `useState` but with mediation by custom function. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/state-usemediatedstate--demo)
150+
- [`useFirstMountState`](./docs/useFirstMountState.md) &mdash; check if current render is first. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/state-usefirstmountstate--demo)
151+
- [`useRendersCount`](./docs/useRendersCount.md) &mdash; count component renders. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/state-userenderscount--demo)
152+
- [`createGlobalState`](./docs/createGlobalState.md) &mdash; cross component shared state.[![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/state-createglobalstate--demo)
153+
- [`useMethods`](./docs/useMethods.md) &mdash; neat alternative to `useReducer`. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/state-usemethods--demo)
154+
<br/>
155+
<br/>
156+
- [**Miscellaneous**]()
157+
- [`useEnsuredForwardedRef`](./docs/useEnsuredForwardedRef.md) and [`ensuredForwardRef`](./docs/useEnsuredForwardedRef.md) &mdash; use a React.forwardedRef safely. [![][img-demo]](https://niqingyang.github.io/vue-next-use/?path=/story/state-useensuredforwardedref--demo)
4158

5-
## Usage (beta)
159+
<br />
160+
<br />
161+
<br />
162+
<br />
163+
<br />
164+
<br />
165+
<br />
6166

7-
```bash
8-
npm install vue-next-use
9-
```
167+
<p align="center">
168+
<a href="./docs/Usage.md"><strong>Usage</strong></a> &mdash; how to import.
169+
<br />
170+
<a href="./LICENSE"><strong>Unlicense</strong></a> &mdash; public domain.
171+
<br />
172+
<a href="https://opencollective.com/vue-next-use/contribute"><strong>Support</strong></a> &mdash; add yourself to backer list below.
173+
</p>
10174

11-
or
175+
<br />
176+
<br />
177+
<br />
178+
<br />
179+
<br />
12180

13-
```bash
14-
yarn add vue-next-use
15-
```
181+
[img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg
16182

17-
## Done
183+
<div align="center">
184+
<h1>Contributors</h1>
185+
</div>
18186

19-
- useAsync
20-
- useAsyncFn
21-
- useAsyncRetry
22-
- useBeforeUnload
23-
- useClickAway
24-
- useComputedSetState
25-
- useComputedState
26-
- useCookie
27-
- useCopyToClipboard
28-
- useDrop
29-
- useDropArea
30-
- useEffect
31-
- useEvent
32-
- useFullscreen
33-
- useGeolocation
34-
- useGetSet
35-
- useHarmonicIntervalFn
36-
- useHash
37-
- useHover
38-
- useHoverDirty
39-
- useIdle
40-
- useIntersection
41-
- useInterval
42-
- useKey
43-
- useKeyboardJs
44-
- useKeyPress
45-
- useKeyPressEvent
46-
- useList
47-
- useLocation
48-
- useLongPress
49-
- useMap
50-
- useMount
51-
- useMountedState
52-
- useQueue
53-
- useReactive
54-
- useReadonly
55-
- useSet
56-
- useSetState
57-
- useSlider
58-
- useSpeech
59-
- useSpring
60-
- useState
61-
- useTimeout
62-
- useTimeoutFn
63-
- useToggle
64-
- useVideo
187+
<br />
188+
<br />
65189

66-
## Other
190+
<a href="https://github.com/streamich/vue-next-use/graphs/contributors"><img src="https://opencollective.com/vue-next-use/contributors.svg?width=890&button=false" /></a>
191+
192+
<br />
193+
<br />
194+
<br />
195+
<br />
196+
<br />
67197

68-
doing...

0 commit comments

Comments
 (0)