Context Navigation

README.md

main

Last change on this file was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago
Update repo after prototype presentation
Property mode set to `100644`
File size: 15.8 KB

Rev	Line
[d565449]	1	<div align="center">
	2	<h1>
	3	<br/>
	4	<br/>
	5	👍
	6	<br />
	7	react-use
	8	<br />
	9	<br />
	10	<br />
	11	<br />
	12	</h1>
	13	<sup>
	14	<br />
	15	<br />
	16	<a href="https://www.npmjs.com/package/react-use">
	17	<img src="https://img.shields.io/npm/v/react-use.svg" alt="npm package" />
	18	</a>
	19	<a href="https://circleci.com/gh/streamich/react-use">
	20	<img src="https://img.shields.io/circleci/project/github/streamich/react-use/master.svg" alt="CircleCI master" />
	21	</a>
	22	<a href="https://www.npmjs.com/package/react-use">
	23	<img src="https://img.shields.io/npm/dm/react-use.svg" alt="npm downloads" />
	24	</a>
	25	<a href="http://streamich.github.io/react-use">
	26	<img src="https://img.shields.io/badge/demos-🚀-yellow.svg" alt="demos" />
	27	</a>
	28	<br />
	29	Collection of essential <a href="https://reactjs.org/docs/hooks-intro.html">React Hooks</a>.</em>
	30	<em>Port of</em> <a href="https://github.com/streamich/libreact"><code>libreact</code></a>.
	31	<br />
	32	Translations: <a href="https://github.com/zenghongtu/react-use-chinese/blob/master/README.md">🇨🇳 汉语</a>
	33	</sup>
	34	<br />
	35	<br />
	36	<br />
	37	<br />
	38	<pre>npm i <a href="https://www.npmjs.com/package/react-use">react-use</a></pre>
	39	<br />
	40	<br />
	41	<br />
	42	<br />
	43	<br />
	44	</div>
	45
	46	- [Sensors](./docs/Sensors.md)
	47	- [`useBattery`](./docs/useBattery.md) — tracks device battery state. [![][img-demo]](https://codesandbox.io/s/qlvn662zww)
	48	- [`useGeolocation`](./docs/useGeolocation.md) — tracks geo location state of user's device. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usegeolocation--demo)
	49	- [`useHover` and `useHoverDirty`](./docs/useHover.md) — tracks mouse hover state of some element. [![][img-demo]](https://codesandbox.io/s/zpn583rvx)
	50	- [`useHash`](./docs/useHash.md) — tracks location hash value. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usehash--demo)
	51	- [`useIdle`](./docs/useIdle.md) — tracks whether user is being inactive.
	52	- [`useIntersection`](./docs/useIntersection.md) — tracks an HTML element's intersection. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-useintersection--demo)
	53	- [`useKey`](./docs/useKey.md), [`useKeyPress`](./docs/useKeyPress.md), [`useKeyboardJs`](./docs/useKeyboardJs.md), and [`useKeyPressEvent`](./docs/useKeyPressEvent.md) — track keys. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usekeypressevent--demo)
	54	- [`useLocation`](./docs/useLocation.md) and [`useSearchParam`](./docs/useSearchParam.md) — tracks page navigation bar location state.
	55	- [`useLongPress`](./docs/useLongPress.md) — tracks long press gesture of some element.
	56	- [`useMedia`](./docs/useMedia.md) — tracks state of a CSS media query. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemedia--demo)
	57	- [`useMediaDevices`](./docs/useMediaDevices.md) — tracks state of connected hardware devices.
	58	- [`useMotion`](./docs/useMotion.md) — tracks state of device's motion sensor.
	59	- [`useMouse` and `useMouseHovered`](./docs/useMouse.md) — tracks state of mouse position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemouse--docs)
	60	- [`useMouseWheel`](./docs/useMouseWheel.md) — tracks deltaY of scrolled mouse wheel. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemousewheel--docs)
	61	- [`useNetworkState`](./docs/useNetworkState.md) — tracks the state of browser's network connection. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usenetworkstate--demo)
	62	- [`useOrientation`](./docs/useOrientation.md) — tracks state of device's screen orientation.
	63	- [`usePageLeave`](./docs/usePageLeave.md) — triggers when mouse leaves page boundaries.
	64	- [`useScratch`](./docs/useScratch.md) — tracks mouse click-and-scrub state.
	65	- [`useScroll`](./docs/useScroll.md) — tracks an HTML element's scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescroll--docs)
	66	- [`useScrolling`](./docs/useScrolling.md) — tracks whether HTML element is scrolling.
	67	- [`useStartTyping`](./docs/useStartTyping.md) — detects when user starts typing.
	68	- [`useWindowScroll`](./docs/useWindowScroll.md) — tracks `Window` scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usewindowscroll--docs)
	69	- [`useWindowSize`](./docs/useWindowSize.md) — tracks `Window` dimensions. [![][img-demo]](https://codesandbox.io/s/m7ln22668)
	70	- [`useMeasure`](./docs/useMeasure.md) and [`useSize`](./docs/useSize.md) — tracks an HTML element's dimensions. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemeasure--demo)
	71	- [`createBreakpoint`](./docs/createBreakpoint.md) — tracks `innerWidth`
	72	- [`useScrollbarWidth`](./docs/useScrollbarWidth.md) — detects browser's native scrollbars width. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescrollbarwidth--demo)
	73	- [`usePinchZoom`](./docs/usePinchZoom.md) — tracks pointer events to detect pinch zoom in and out status. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usePinchZoom--demo)
	74	<br/>
	75	<br/>
	76	- [UI](./docs/UI.md)
	77	- [`useAudio`](./docs/useAudio.md) — plays audio and exposes its controls. [![][img-demo]](https://codesandbox.io/s/2o4lo6rqy)
	78	- [`useClickAway`](./docs/useClickAway.md) — triggers callback when user clicks outside target area.
	79	- [`useCss`](./docs/useCss.md) — dynamically adjusts CSS.
	80	- [`useDrop` and `useDropArea`](./docs/useDrop.md) — tracks file, link and copy-paste drops.
	81	- [`useFullscreen`](./docs/useFullscreen.md) — display an element or video full-screen. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usefullscreen--demo)
	82	- [`useSlider`](./docs/useSlider.md) — provides slide behavior over any HTML element. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-useslider--demo)
	83	- [`useSpeech`](./docs/useSpeech.md) — synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m)
	84	- [`useVibrate`](./docs/useVibrate.md) — provide physical feedback using the [Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API). [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevibrate--demo)
	85	- [`useVideo`](./docs/useVideo.md) — plays video, tracks its state, and exposes playback controls. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevideo--demo)
	86	<br/>
	87	<br/>
	88	- [Animations](./docs/Animations.md)
	89	- [`useRaf`](./docs/useRaf.md) — re-renders component on each `requestAnimationFrame`.
	90	- [`useInterval`](./docs/useInterval.md) and [`useHarmonicIntervalFn`](./docs/useHarmonicIntervalFn.md) — re-renders component on a set interval using `setInterval`.
	91	- [`useSpring`](./docs/useSpring.md) — interpolates number over time according to spring dynamics.
	92	- [`useTimeout`](./docs/useTimeout.md) — re-renders component after a timeout.
	93	- [`useTimeoutFn`](./docs/useTimeoutFn.md) — calls given function after a timeout. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/animation-usetimeoutfn--demo)
	94	- [`useTween`](./docs/useTween.md) — re-renders component, while tweening a number from 0 to 1. [![][img-demo]](https://codesandbox.io/s/52990wwzyl)
	95	- [`useUpdate`](./docs/useUpdate.md) — returns a callback, which re-renders component when called.
	96	<br/>
	97	<br/>
	98	- [Side-effects](./docs/Side-effects.md)
	99	- [`useAsync`](./docs/useAsync.md), [`useAsyncFn`](./docs/useAsyncFn.md), and [`useAsyncRetry`](./docs/useAsyncRetry.md) — resolves an `async` function.
	100	- [`useBeforeUnload`](./docs/useBeforeUnload.md) — shows browser alert when user try to reload or close the page.
	101	- [`useCookie`](./docs/useCookie.md) — provides way to read, update and delete a cookie. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usecookie--demo)
	102	- [`useCopyToClipboard`](./docs/useCopyToClipboard.md) — copies text to clipboard.
	103	- [`useDebounce`](./docs/useDebounce.md) — debounces a function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usedebounce--demo)
	104	- [`useError`](./docs/useError.md) — error dispatcher. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-useerror--demo)
	105	- [`useFavicon`](./docs/useFavicon.md) — sets favicon of the page.
	106	- [`useLocalStorage`](./docs/useLocalStorage.md) — manages a value in `localStorage`.
	107	- [`useLockBodyScroll`](./docs/useLockBodyScroll.md) — lock scrolling of the body element.
	108	- [`useRafLoop`](./docs/useRafLoop.md) — calls given function inside the RAF loop.
	109	- [`useSessionStorage`](./docs/useSessionStorage.md) — manages a value in `sessionStorage`.
	110	- [`useThrottle` and `useThrottleFn`](./docs/useThrottle.md) — throttles a function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usethrottle--demo)
	111	- [`useTitle`](./docs/useTitle.md) — sets title of the page.
	112	- [`usePermission`](./docs/usePermission.md) — query permission status for browser APIs.
	113	<br/>
	114	<br/>
	115	- [Lifecycles](./docs/Lifecycles.md)
	116	- [`useEffectOnce`](./docs/useEffectOnce.md) — a modified [`useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect) hook that only runs once.
	117	- [`useEvent`](./docs/useEvent.md) — subscribe to events.
	118	- [`useLifecycles`](./docs/useLifecycles.md) — calls `mount` and `unmount` callbacks.
	119	- [`useMountedState`](./docs/useMountedState.md) and [`useUnmountPromise`](./docs/useUnmountPromise.md) — track if component is mounted.
	120	- [`usePromise`](./docs/usePromise.md) — resolves promise only while component is mounted.
	121	- [`useLogger`](./docs/useLogger.md) — logs in console as component goes through life-cycles.
	122	- [`useMount`](./docs/useMount.md) — calls `mount` callbacks.
	123	- [`useUnmount`](./docs/useUnmount.md) — calls `unmount` callbacks.
	124	- [`useUpdateEffect`](./docs/useUpdateEffect.md) — run an `effect` only on updates.
	125	- [`useIsomorphicLayoutEffect`](./docs/useIsomorphicLayoutEffect.md) — `useLayoutEffect` that that works on server.
	126	- [`useDeepCompareEffect`](./docs/useDeepCompareEffect.md), [`useShallowCompareEffect`](./docs/useShallowCompareEffect.md), and [`useCustomCompareEffect`](./docs/useCustomCompareEffect.md)
	127	<br/>
	128	<br/>
	129	- [State](./docs/State.md)
	130	- [`createMemo`](./docs/createMemo.md) — factory of memoized hooks.
	131	- [`createReducer`](./docs/createReducer.md) — factory of reducer hooks with custom middleware.
	132	- [`createReducerContext`](./docs/createReducerContext.md) and [`createStateContext`](./docs/createStateContext.md) — factory of hooks for a sharing state between components.
	133	- [`useDefault`](./docs/useDefault.md) — returns the default value when state is `null` or `undefined`.
	134	- [`useGetSet`](./docs/useGetSet.md) — returns state getter `get()` instead of raw state.
	135	- [`useGetSetState`](./docs/useGetSetState.md) — as if [`useGetSet`](./docs/useGetSet.md) and [`useSetState`](./docs/useSetState.md) had a baby.
	136	- [`useLatest`](./docs/useLatest.md) — returns the latest state or props
	137	- [`usePrevious`](./docs/usePrevious.md) — returns the previous state or props. [![][img-demo]](https://codesandbox.io/s/fervent-galileo-krgx6)
	138	- [`usePreviousDistinct`](./docs/usePreviousDistinct.md) — like `usePrevious` but with a predicate to determine if `previous` should update.
	139	- [`useObservable`](./docs/useObservable.md) — tracks latest value of an `Observable`.
	140	- [`useRafState`](./docs/useRafState.md) — creates `setState` method which only updates after `requestAnimationFrame`. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-userafstate--demo)
	141	- [`useSetState`](./docs/useSetState.md) — creates `setState` method which works like `this.setState`. [![][img-demo]](https://codesandbox.io/s/n75zqn1xp0)
	142	- [`useStateList`](./docs/useStateList.md) — circularly iterates over an array. [![][img-demo]](https://codesandbox.io/s/bold-dewdney-pjzkd)
	143	- [`useToggle` and `useBoolean`](./docs/useToggle.md) — tracks state of a boolean. [![][img-demo]](https://codesandbox.io/s/focused-sammet-brw2d)
	144	- [`useCounter` and `useNumber`](./docs/useCounter.md) — tracks state of a number. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usecounter--demo)
	145	- [`useList`](./docs/useList.md) ~and [`useUpsert`](./docs/useUpsert.md)~ — tracks state of an array. [![][img-demo]](https://codesandbox.io/s/wonderful-mahavira-1sm0w)
	146	- [`useMap`](./docs/useMap.md) — tracks state of an object. [![][img-demo]](https://codesandbox.io/s/quirky-dewdney-gi161)
	147	- [`useSet`](./docs/useSet.md) — tracks state of a Set. [![][img-demo]](https://codesandbox.io/s/bold-shtern-6jlgw)
	148	- [`useQueue`](./docs/useQueue.md) — implements simple queue.
	149	- [`useStateValidator`](./docs/useStateValidator.md) — tracks state of an object. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usestatevalidator--demo)
	150	- [`useStateWithHistory`](./docs/useStateWithHistory.md) — stores previous state values and provides handles to travel through them. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usestatewithhistory--demo)
	151	- [`useMultiStateValidator`](./docs/useMultiStateValidator.md) — alike the `useStateValidator`, but tracks multiple states at a time. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemultistatevalidator--demo)
	152	- [`useMediatedState`](./docs/useMediatedState.md) — like the regular `useState` but with mediation by custom function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemediatedstate--demo)
	153	- [`useFirstMountState`](./docs/useFirstMountState.md) — check if current render is first. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usefirstmountstate--demo)
	154	- [`useRendersCount`](./docs/useRendersCount.md) — count component renders. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-userenderscount--demo)
	155	- [`createGlobalState`](./docs/createGlobalState.md) — cross component shared state.[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-createglobalstate--demo)
	156	- [`useMethods`](./docs/useMethods.md) — neat alternative to `useReducer`. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemethods--demo)
	157	<br/>
	158	<br/>
	159	- [Miscellaneous]()
	160	- [`useEnsuredForwardedRef`](./docs/useEnsuredForwardedRef.md) and [`ensuredForwardRef`](./docs/useEnsuredForwardedRef.md) — use a React.forwardedRef safely. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-useensuredforwardedref--demo)
	161
	162	<br />
	163	<br />
	164	<br />
	165	<br />
	166	<br />
	167	<br />
	168	<br />
	169
	170	<p align="center">
	171	<a href="./docs/Usage.md"><strong>Usage</strong></a> — how to import.
	172	<br />
	173	<a href="./LICENSE"><strong>Unlicense</strong></a> — public domain.
	174	<br />
	175	<a href="https://opencollective.com/react-use/contribute"><strong>Support</strong></a> — add yourself to backer list below.
	176	</p>
	177
	178	<br />
	179	<br />
	180	<br />
	181	<br />
	182	<br />
	183
	184	[img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg
	185
	186	<div align="center">
	187	<h1>Contributors</h1>
	188	</div>
	189
	190	<br />
	191	<br />
	192
	193	<a href="https://github.com/streamich/react-use/graphs/contributors"><img src="https://opencollective.com/react-use/contributors.svg?width=890&button=false" /></a>
	194
	195	<br />
	196	<br />
	197	<br />
	198	<br />
	199	<br />

Note: See TracBrowser for help on using the repository browser.

Context Navigation

source: imaps-frontend/node_modules/react-use/README.md

Download in other formats: