From a7731ccac5ad8691dfdc69d85646f0aab3da4429 Mon Sep 17 00:00:00 2001 From: imbhargav5 Date: Sat, 31 Jul 2021 16:07:18 +0000 Subject: [PATCH] chore(docs): Update changelog and docs --- CHANGELOG.md | 13 + package.json | 2 +- sidebars.json | 7 +- .../version-5.4.3/getting-started.md | 35 +++ versioned_docs/version-5.4.3/home-sandbox.md | 12 + versioned_docs/version-5.4.3/list-of-hooks.md | 73 +++++ versioned_docs/version-5.4.3/motivation.md | 13 + versioned_docs/version-5.4.3/rooks.md | 129 ++++++++ .../version-5.4.3/useBoundingclientrect.md | 109 +++++++ .../version-5.4.3/useBoundingclientrectRef.md | 107 +++++++ versioned_docs/version-5.4.3/useCountdown.md | 55 ++++ versioned_docs/version-5.4.3/useCounter.md | 92 ++++++ versioned_docs/version-5.4.3/useDebounce.md | 34 +++ versioned_docs/version-5.4.3/useDidMount.md | 63 ++++ versioned_docs/version-5.4.3/useDidUpdate.md | 65 ++++ .../version-5.4.3/useDimensionsRef.md | 46 +++ .../version-5.4.3/useDocumentEventListener.md | 57 ++++ .../version-5.4.3/useEffectOnceWhen.md | 58 ++++ .../version-5.4.3/useEventListenerRef.md | 58 ++++ versioned_docs/version-5.4.3/useForkRef.md | 100 +++++++ versioned_docs/version-5.4.3/useFreshRef.md | 55 ++++ versioned_docs/version-5.4.3/useFreshTick.md | 67 +++++ versioned_docs/version-5.4.3/useFullscreen.md | 210 +++++++++++++ .../version-5.4.3/useGeolocation.md | 95 ++++++ versioned_docs/version-5.4.3/useInViewRef.md | 92 ++++++ versioned_docs/version-5.4.3/useInput.md | 101 +++++++ .../useIntersectionObserverRef.md | 88 ++++++ versioned_docs/version-5.4.3/useInterval.md | 92 ++++++ .../version-5.4.3/useIntervalWhen.md | 57 ++++ .../version-5.4.3/useIsomorphicEffect.md | 57 ++++ versioned_docs/version-5.4.3/useKey.md | 148 +++++++++ .../version-5.4.3/useKeyBindings.md | 62 ++++ versioned_docs/version-5.4.3/useKeyRef.md | 143 +++++++++ versioned_docs/version-5.4.3/useKeys.md | 82 +++++ .../version-5.4.3/useLifecycleLogger.md | 47 +++ .../version-5.4.3/useLocalstorage.md | 61 ++++ .../version-5.4.3/useLocalstorageState.md | 55 ++++ versioned_docs/version-5.4.3/useMapState.md | 45 +++ versioned_docs/version-5.4.3/useMediaMatch.md | 55 ++++ versioned_docs/version-5.4.3/useMergeRefs.md | 55 ++++ versioned_docs/version-5.4.3/useMouse.md | 67 +++++ .../version-5.4.3/useMultiSelectableList.md | 42 +++ .../version-5.4.3/useMutationObserver.md | 107 +++++++ .../version-5.4.3/useMutationObserverRef.md | 96 ++++++ .../version-5.4.3/useNavigatorLanguage.md | 55 ++++ .../version-5.4.3/useOnWindowResize.md | 44 +++ .../version-5.4.3/useOnWindowScroll.md | 61 ++++ versioned_docs/version-5.4.3/useOnline.md | 55 ++++ .../version-5.4.3/useOutsideClick.md | 59 ++++ .../version-5.4.3/useOutsideClickRef.md | 58 ++++ versioned_docs/version-5.4.3/usePrevious.md | 75 +++++ .../version-5.4.3/usePreviousDifferent.md | 56 ++++ .../version-5.4.3/usePreviousImmediate.md | 43 +++ versioned_docs/version-5.4.3/useQueueState.md | 57 ++++ versioned_docs/version-5.4.3/useRaf.md | 79 +++++ versioned_docs/version-5.4.3/useSelect.md | 92 ++++++ .../version-5.4.3/useSelectableList.md | 42 +++ .../version-5.4.3/useSessionstorage.md | 61 ++++ .../version-5.4.3/useSessionstorageState.md | 42 +++ versioned_docs/version-5.4.3/useStackState.md | 74 +++++ versioned_docs/version-5.4.3/useThrottle.md | 87 ++++++ versioned_docs/version-5.4.3/useTimeAgo.md | 62 ++++ versioned_docs/version-5.4.3/useTimeout.md | 74 +++++ .../version-5.4.3/useTimeoutWhen.md | 42 +++ versioned_docs/version-5.4.3/useToggle.md | 87 ++++++ versioned_docs/version-5.4.3/useUndoState.md | 129 ++++++++ .../version-5.4.3/useUpdateEffect.md | 67 +++++ .../version-5.4.3/useVisibilitySensor.md | 116 +++++++ .../version-5.4.3/useWillUnmount.md | 78 +++++ .../version-5.4.3/useWindowEventListener.md | 59 ++++ .../version-5.4.3/useWindowScrollPosition.md | 60 ++++ versioned_docs/version-5.4.3/useWindowSize.md | 80 +++++ versioned_docs/version-5.4.3/useWorker.md | 60 ++++ .../version-5.4.3-sidebars.json | 282 ++++++++++++++++++ versions.json | 1 + 75 files changed, 5341 insertions(+), 3 deletions(-) create mode 100644 versioned_docs/version-5.4.3/getting-started.md create mode 100644 versioned_docs/version-5.4.3/home-sandbox.md create mode 100644 versioned_docs/version-5.4.3/list-of-hooks.md create mode 100644 versioned_docs/version-5.4.3/motivation.md create mode 100644 versioned_docs/version-5.4.3/rooks.md create mode 100644 versioned_docs/version-5.4.3/useBoundingclientrect.md create mode 100644 versioned_docs/version-5.4.3/useBoundingclientrectRef.md create mode 100644 versioned_docs/version-5.4.3/useCountdown.md create mode 100644 versioned_docs/version-5.4.3/useCounter.md create mode 100644 versioned_docs/version-5.4.3/useDebounce.md create mode 100644 versioned_docs/version-5.4.3/useDidMount.md create mode 100644 versioned_docs/version-5.4.3/useDidUpdate.md create mode 100644 versioned_docs/version-5.4.3/useDimensionsRef.md create mode 100644 versioned_docs/version-5.4.3/useDocumentEventListener.md create mode 100644 versioned_docs/version-5.4.3/useEffectOnceWhen.md create mode 100644 versioned_docs/version-5.4.3/useEventListenerRef.md create mode 100644 versioned_docs/version-5.4.3/useForkRef.md create mode 100644 versioned_docs/version-5.4.3/useFreshRef.md create mode 100644 versioned_docs/version-5.4.3/useFreshTick.md create mode 100644 versioned_docs/version-5.4.3/useFullscreen.md create mode 100644 versioned_docs/version-5.4.3/useGeolocation.md create mode 100644 versioned_docs/version-5.4.3/useInViewRef.md create mode 100644 versioned_docs/version-5.4.3/useInput.md create mode 100644 versioned_docs/version-5.4.3/useIntersectionObserverRef.md create mode 100644 versioned_docs/version-5.4.3/useInterval.md create mode 100644 versioned_docs/version-5.4.3/useIntervalWhen.md create mode 100644 versioned_docs/version-5.4.3/useIsomorphicEffect.md create mode 100644 versioned_docs/version-5.4.3/useKey.md create mode 100644 versioned_docs/version-5.4.3/useKeyBindings.md create mode 100644 versioned_docs/version-5.4.3/useKeyRef.md create mode 100644 versioned_docs/version-5.4.3/useKeys.md create mode 100644 versioned_docs/version-5.4.3/useLifecycleLogger.md create mode 100644 versioned_docs/version-5.4.3/useLocalstorage.md create mode 100644 versioned_docs/version-5.4.3/useLocalstorageState.md create mode 100644 versioned_docs/version-5.4.3/useMapState.md create mode 100644 versioned_docs/version-5.4.3/useMediaMatch.md create mode 100644 versioned_docs/version-5.4.3/useMergeRefs.md create mode 100644 versioned_docs/version-5.4.3/useMouse.md create mode 100644 versioned_docs/version-5.4.3/useMultiSelectableList.md create mode 100644 versioned_docs/version-5.4.3/useMutationObserver.md create mode 100644 versioned_docs/version-5.4.3/useMutationObserverRef.md create mode 100644 versioned_docs/version-5.4.3/useNavigatorLanguage.md create mode 100644 versioned_docs/version-5.4.3/useOnWindowResize.md create mode 100644 versioned_docs/version-5.4.3/useOnWindowScroll.md create mode 100644 versioned_docs/version-5.4.3/useOnline.md create mode 100644 versioned_docs/version-5.4.3/useOutsideClick.md create mode 100644 versioned_docs/version-5.4.3/useOutsideClickRef.md create mode 100644 versioned_docs/version-5.4.3/usePrevious.md create mode 100644 versioned_docs/version-5.4.3/usePreviousDifferent.md create mode 100644 versioned_docs/version-5.4.3/usePreviousImmediate.md create mode 100644 versioned_docs/version-5.4.3/useQueueState.md create mode 100644 versioned_docs/version-5.4.3/useRaf.md create mode 100644 versioned_docs/version-5.4.3/useSelect.md create mode 100644 versioned_docs/version-5.4.3/useSelectableList.md create mode 100644 versioned_docs/version-5.4.3/useSessionstorage.md create mode 100644 versioned_docs/version-5.4.3/useSessionstorageState.md create mode 100644 versioned_docs/version-5.4.3/useStackState.md create mode 100644 versioned_docs/version-5.4.3/useThrottle.md create mode 100644 versioned_docs/version-5.4.3/useTimeAgo.md create mode 100644 versioned_docs/version-5.4.3/useTimeout.md create mode 100644 versioned_docs/version-5.4.3/useTimeoutWhen.md create mode 100644 versioned_docs/version-5.4.3/useToggle.md create mode 100644 versioned_docs/version-5.4.3/useUndoState.md create mode 100644 versioned_docs/version-5.4.3/useUpdateEffect.md create mode 100644 versioned_docs/version-5.4.3/useVisibilitySensor.md create mode 100644 versioned_docs/version-5.4.3/useWillUnmount.md create mode 100644 versioned_docs/version-5.4.3/useWindowEventListener.md create mode 100644 versioned_docs/version-5.4.3/useWindowScrollPosition.md create mode 100644 versioned_docs/version-5.4.3/useWindowSize.md create mode 100644 versioned_docs/version-5.4.3/useWorker.md create mode 100644 versioned_sidebars/version-5.4.3-sidebars.json diff --git a/CHANGELOG.md b/CHANGELOG.md index f8d6ba5cb1..9bf4b89fa1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,16 @@ +## 5.4.3 (2021-07-31) + +* fix(useOutsideClickRef): fix child update logic and event listener phase (#534) ([8a68faf](https://github.com/imbhargav5/rooks/commit/8a68faf)), closes [#534](https://github.com/imbhargav5/rooks/issues/534) +* chore(docs): Update changelog and docs ([2a25edc](https://github.com/imbhargav5/rooks/commit/2a25edc)) +* chore(docs): update sidebar and helpers (#537) ([be40993](https://github.com/imbhargav5/rooks/commit/be40993)), closes [#537](https://github.com/imbhargav5/rooks/issues/537) +* build(tsconfig): include .tsx files in tsconfig (#536) ([10d4b7b](https://github.com/imbhargav5/rooks/commit/10d4b7b)), closes [#536](https://github.com/imbhargav5/rooks/issues/536) +* contrib-readme-action has updated readme ([3e0af80](https://github.com/imbhargav5/rooks/commit/3e0af80)) +* contrib-readme-action has updated readme ([173877d](https://github.com/imbhargav5/rooks/commit/173877d)) +* docs: add redirects for old links (#527) ([ae7659a](https://github.com/imbhargav5/rooks/commit/ae7659a)), closes [#527](https://github.com/imbhargav5/rooks/issues/527) +* docs(useThrottle): update useThrottle example and sandbox (#514) ([9c469db](https://github.com/imbhargav5/rooks/commit/9c469db)), closes [#514](https://github.com/imbhargav5/rooks/issues/514) + + + ## 5.4.2 (2021-07-25) * fix(pkg): add more details to package.json (#522) ([440519f](https://github.com/imbhargav5/rooks/commit/440519f)), closes [#522](https://github.com/imbhargav5/rooks/issues/522) diff --git a/package.json b/package.json index b4717108cf..5d8a877ceb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rooks", - "version": "5.4.2", + "version": "5.4.3", "description": "Useful React hooks for everyone.", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", diff --git a/sidebars.json b/sidebars.json index 53df59aa19..edc9c31940 100755 --- a/sidebars.json +++ b/sidebars.json @@ -3,7 +3,10 @@ { "label": "Quick Start", "collapsed": false, - "items": ["getting-started", "motivation"], + "items": [ + "getting-started", + "motivation" + ], "type": "category" }, { @@ -82,4 +85,4 @@ "label": "Hooks List" } ] -} +} \ No newline at end of file diff --git a/versioned_docs/version-5.4.3/getting-started.md b/versioned_docs/version-5.4.3/getting-started.md new file mode 100644 index 0000000000..7e66bef19d --- /dev/null +++ b/versioned_docs/version-5.4.3/getting-started.md @@ -0,0 +1,35 @@ +--- +id: getting-started +title: Getting Started +sidebar_label: Getting Started +--- + + + +### Installation + + npm i - s rooks + +### Importing the hooks + +Import any hook from "rooks" and start using them! + +```jsx +import { useDidMount } from 'rooks'; +``` + +### Usage + +```jsx +function App() { + useDidMount(() => { + alert('mounted'); + }); + return ( +
+

Hello CodeSandbox

+

Start editing to see some magic happen!

+
+ ); +} +``` diff --git a/versioned_docs/version-5.4.3/home-sandbox.md b/versioned_docs/version-5.4.3/home-sandbox.md new file mode 100644 index 0000000000..2a6c958a93 --- /dev/null +++ b/versioned_docs/version-5.4.3/home-sandbox.md @@ -0,0 +1,12 @@ + diff --git a/versioned_docs/version-5.4.3/list-of-hooks.md b/versioned_docs/version-5.4.3/list-of-hooks.md new file mode 100644 index 0000000000..4df1767f2d --- /dev/null +++ b/versioned_docs/version-5.4.3/list-of-hooks.md @@ -0,0 +1,73 @@ +--- +id: hooks-list +title: List of Hooks +sidebar_label: Hooks List +--- + + + +* [useBoundingclientrect](https://react-hooks.org/docs/useBoundingclientrect) - getBoundingClientRect hook for React. +* [useBoundingclientrectRef](https://react-hooks.org/docs/useBoundingclientrectRef) - A hook that tracks the boundingclientrect of an element. It returns a callbackRef so that the element node if changed is easily tracked. +* [useCountdown](https://react-hooks.org/docs/useCountdown) - Count down to a target timestamp and call callbacks every second (or provided peried) +* [useCounter](https://react-hooks.org/docs/useCounter) - Counter hook for React. +* [useDebounce](https://react-hooks.org/docs/useDebounce) - Debounce hook for react +* [useDidMount](https://react-hooks.org/docs/useDidMount) - componentDidMount hook for React +* [useDidUpdate](https://react-hooks.org/docs/useDidUpdate) - componentDidUpdate hook for react +* [useDimensionsRef](https://react-hooks.org/docs/useDimensionsRef) - Easily grab dimensions of an element with a ref using this hook +* [useDocumentEventListener](https://react-hooks.org/docs/useDocumentEventListener) - A react hook to an event listener to the document object +* [useEffectOnceWhen](https://react-hooks.org/docs/useEffectOnceWhen) - Runs a callback effect atmost one time when a condition becomes true +* [useEventListenerRef](https://react-hooks.org/docs/useEventListenerRef) - A react hook to add an event listener to a ref +* [useForkRef](https://react-hooks.org/docs/useForkRef) - A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef +* [useFreshRef](https://react-hooks.org/docs/useFreshRef) - Avoid stale state in callbacks with this hook. Auto updates values using a ref. +* [useFreshTick](https://react-hooks.org/docs/useFreshTick) - Like use-fresh-ref but specifically for functions +* [useFullscreen](https://react-hooks.org/docs/useFullscreen) - Use full screen api for making beautiful and emersive experinces. +* [useGeolocation](https://react-hooks.org/docs/useGeolocation) - A hook to provide the geolocation info on client side. +* [useInViewRef](https://react-hooks.org/docs/useInViewRef) - Simple hook that monitors element enters or leave the viewport that's using Intersection Observer API. +* [useInput](https://react-hooks.org/docs/useInput) - Input hook for React. +* [useIntersectionObserverRef](https://react-hooks.org/docs/useIntersectionObserverRef) - A hook to register an intersection observer listener. +* [useInterval](https://react-hooks.org/docs/useInterval) - setInterval hook for React. +* [useIntervalWhen](https://react-hooks.org/docs/useIntervalWhen) - Sets an interval immediately when a condition is true +* [useIsomorphicEffect](https://react-hooks.org/docs/useIsomorphicEffect) - A hook that resolves to useEffect on the server and useLayoutEffect on the client. +* [useKey](https://react-hooks.org/docs/useKey) - keypress, keyup and keydown event handlers as hooks for react. +* [useKeyBindings](https://react-hooks.org/docs/useKeyBindings) - useKeyBindings can bind multiple keys to multiple callbacks and fire the callbacks on key press. +* [useKeyRef](https://react-hooks.org/docs/useKeyRef) - Very similar useKey but it returns a ref +* [useKeys](https://react-hooks.org/docs/useKeys) - A hook which allows to setup callbacks when a combination of keys are pressed at the same time. +* [useLifecycleLogger](https://react-hooks.org/docs/useLifecycleLogger) - A react hook that console logs parameters as component transitions through lifecycles. +* [useLocalstorage](https://react-hooks.org/docs/useLocalstorage) - Localstorage hook for React. Syncs with localstorage values across components and browser windows automatically. Sets and retrieves a key from localStorage and subscribes to it for updates across windows. +* [useLocalstorageState](https://react-hooks.org/docs/useLocalstorageState) - UseState but auto updates values to localStorage +* [useMapState](https://react-hooks.org/docs/useMapState) - A react hook to manage state in a key value pair map. +* [useMediaMatch](https://react-hooks.org/docs/useMediaMatch) - Signal whether or not a media query is currently matched. +* [useMergeRefs](https://react-hooks.org/docs/useMergeRefs) - Merges any number of refs into a single ref +* [useMouse](https://react-hooks.org/docs/useMouse) - Mouse position hook for React. +* [useMultiSelectableList](https://react-hooks.org/docs/useMultiSelectableList) - A custom hook to easily select multiple values from a list +* [useMutationObserver](https://react-hooks.org/docs/useMutationObserver) - Mutation Observer hook for React. +* [useMutationObserverRef](https://react-hooks.org/docs/useMutationObserverRef) - A hook that tracks mutations of an element. It returns a callbackRef. +* [useNavigatorLanguage](https://react-hooks.org/docs/useNavigatorLanguage) - Navigator Language hook for React. +* [useOnWindowResize](https://react-hooks.org/docs/useOnWindowResize) - A React hook for adding an event listener for window resize +* [useOnWindowScroll](https://react-hooks.org/docs/useOnWindowScroll) - A React hook for adding an event listener for window scroll +* [useOnline](https://react-hooks.org/docs/useOnline) - Online status hook for React. +* [useOutsideClick](https://react-hooks.org/docs/useOutsideClick) - Outside click(for a ref) event as hook for React. +* [useOutsideClickRef](https://react-hooks.org/docs/useOutsideClickRef) - A hook that can track a click event outside a ref. Returns a callbackRef. +* [usePrevious](https://react-hooks.org/docs/usePrevious) - Access the previous value of a variable with this React hook +* [usePreviousDifferent](https://react-hooks.org/docs/usePreviousDifferent) - usePreviousDifferent returns the last different value of a variable +* [usePreviousImmediate](https://react-hooks.org/docs/usePreviousImmediate) - usePreviousImmediate returns the previous value of a variable even if it was the same or different +* [useQueueState](https://react-hooks.org/docs/useQueueState) - A React hook that manages state in the form of a queue +* [useRaf](https://react-hooks.org/docs/useRaf) - A continuously running requestAnimationFrame hook for React +* [useSelect](https://react-hooks.org/docs/useSelect) - Select values from a list easily. List selection hook for react. +* [useSelectableList](https://react-hooks.org/docs/useSelectableList) - Easily select a single value from a list of values. very useful for radio buttons, select inputs etc. +* [useSessionstorage](https://react-hooks.org/docs/useSessionstorage) - Session storage react hook. Easily manage session storage values. +* [useSessionstorageState](https://react-hooks.org/docs/useSessionstorageState) - useState but syncs with sessionstorage +* [useStackState](https://react-hooks.org/docs/useStackState) - A React hook that manages state in the form of a stack +* [useThrottle](https://react-hooks.org/docs/useThrottle) - Throttle custom hook for React +* [useTimeout](https://react-hooks.org/docs/useTimeout) - setTimeout hook for react. +* [useTimeoutWhen](https://react-hooks.org/docs/useTimeoutWhen) - Takes a callback and fires it when a condition is true +* [useToggle](https://react-hooks.org/docs/useToggle) - Toggle (between booleans or custom data)hook for React. +* [useUndoState](https://react-hooks.org/docs/useUndoState) - Drop in replacement for useState hook but with undo functionality. +* [useUpdateEffect](https://react-hooks.org/docs/useUpdateEffect) - An useEffect that does not run on first render +* [useVisibilitySensor](https://react-hooks.org/docs/useVisibilitySensor) - Visibility sensor hook for React. +* [useWillUnmount](https://react-hooks.org/docs/useWillUnmount) - componentWillUnmount lifecycle as hook for React. +* [useWindowEventListener](https://react-hooks.org/docs/useWindowEventListener) - Adds an event listener to window +* [useWindowScrollPosition](https://react-hooks.org/docs/useWindowScrollPosition) - A React hook to get the scroll position of the window +* [useWindowSize](https://react-hooks.org/docs/useWindowSize) - Window size hook for React. + + diff --git a/versioned_docs/version-5.4.3/motivation.md b/versioned_docs/version-5.4.3/motivation.md new file mode 100644 index 0000000000..50ee83ad37 --- /dev/null +++ b/versioned_docs/version-5.4.3/motivation.md @@ -0,0 +1,13 @@ +--- +id: motivation +title: Motivation +sidebar_label: Motivation +--- + +When custom hooks were released by the **React.js** team, I was overwhelmed with excitement watching them show the amount of customization that can now be done with custom hooks. + +So that was a day I immediately decided to build **Rooks as a collection of custom hooks** that I would use for my projects regularly as a freelancer, or as a developer at my day. + +I would use so many components which use the same behaviour over and over again. And I would keep asking myself if there was a better way of composing this behaviour so that I don't have to write the same code over and over again. + +**Building a drop down, a model, or a form etec are all repetitive activities** that we as developers do on a day to day basis, and Rooks is an attempt to help you quickly build components as quickly as you can. I hope this proves as useful to you as it is to me. diff --git a/versioned_docs/version-5.4.3/rooks.md b/versioned_docs/version-5.4.3/rooks.md new file mode 100644 index 0000000000..464f3f5397 --- /dev/null +++ b/versioned_docs/version-5.4.3/rooks.md @@ -0,0 +1,129 @@ +--- +id: rooks +title: rooks +sidebar_label: rooks +slug: / +--- + +
+
+ + +
+
+ +
+ +## [Complete Documentation](https://react-hooks.org/) + +[![Image from Gyazo](https://i.gyazo.com/742dc22ec370af0a96322427b6a32a9b.gif)](https://gyazo.com/742dc22ec370af0a96322427b6a32a9b) + +## List of all hooks + + + +- [useBoundingclientrectRef](https://react-hooks.org/docs/useBoundingclientrectRef) - A hook that tracks the boundingclientrect of an element. It returns a callbackRef so that the element node if changed is easily tracked. +- [useBoundingclientrect](https://react-hooks.org/docs/useBoundingclientrect) - A React Hooks package for boundingclientrect +- [useCountdown](https://react-hooks.org/docs/useCountdown) - Count down to a target timestamp and call callbacks every second (or provided peried) +- [useCounter](https://react-hooks.org/docs/useCounter) - A React Hooks package for counter +- [useDebounce](https://react-hooks.org/docs/useDebounce) - Debounce hook for react +- [useDidMount](https://react-hooks.org/docs/useDidMount) - A React hooks package for componentDidMount +- [useDidUpdate](https://react-hooks.org/docs/useDidUpdate) - componentDidUpdate hook for react +- [useDocumentEventListener](https://react-hooks.org/docs/useDocumentEventListener) - A react hook to an event listener to the document object +- [useEffectOnceWhen](https://react-hooks.org/docs/useEffectOnceWhen) - Runs a callback effect atmost one time when a condition becomes true +- [useEventListenerRef](https://react-hooks.org/docs/useEventListenerRef) - A react hook to add an event listener to a ref +- [useForkRef](https://react-hooks.org/docs/useForkRef) - A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef +- [useFreshRef](https://react-hooks.org/docs/useFreshRef) - Avoid stale state in callbacks with this hook. Auto updates values using a ref. +- [useFreshTick](https://react-hooks.org/docs/useFreshTick) - Like useFreshRef but specifically for functions +- [useFullscreen](https://react-hooks.org/docs/useFullscreen) - A React Hooks package for fullscreen. +- [useInViewRef](https://react-hooks.org/docs/useInViewRef) - Simple hook that monitors element enters or leave the viewport. +- [useGeolocation](https://react-hooks.org/docs/useGeolocation) - A hook to provide the geolocation info on client side. +- [useInput](https://react-hooks.org/docs/useInput) - A React Hooks package for input +- [useIntersectionObserverRef](https://react-hooks.org/docs/useIntersectionObserverRef) - A hook to register an intersection observer listener +- [useIntervalWhen](https://react-hooks.org/docs/useIntervalWhen) - Sets an interval immediately when a condition is true +- [useInterval](https://react-hooks.org/docs/useInterval) - A react hook for using setInterval +- [useIsomorphicEffect](https://react-hooks.org/docs/useIsomorphicEffect) - Resolves to useEffect when window is not in scope and useLayout effect in the browser +- [useKeyRef](https://react-hooks.org/docs/useKeyRef) - Very similar to useKey but it returns a ref +- [useKey](https://react-hooks.org/docs/useKey) - Keyboard key handler hook for react +- [useKeys](https://react-hooks.org/docs/useKeys) - A hook which allows to setup callbacks on multiple keypresses at the same time +- [useLocalstorageState](https://react-hooks.org/docs/useLocalstorageState) - UseState but auto updates values to localStorage +- [useLocalstorage](https://react-hooks.org/docs/useLocalstorage) - Local Storage hook for React +- [useMapState](https://react-hooks.org/docs/useMapState) - A react hook to manage state in a key value pair map. +- [useMergeRefs](https://react-hooks.org/docs/useMergeRefs) - Merges any number of refs into a single ref +- [useMouse](https://react-hooks.org/docs/useMouse) - A React Hooks package for mouse +- [useMultiSelectableList](https://react-hooks.org/docs/useMultiSelectableList) - A custom hook to easily select multiple values from a list +- [useMutationObserverRef](https://react-hooks.org/docs/useMutationObserverRef) - A hook that tracks mutations of an element. It returns a callbackRef. +- [useMutationObserver](https://react-hooks.org/docs/useMutationObserver) - A React Hooks package for mutation-observer +- [useNavigatorLanguage](https://react-hooks.org/docs/useNavigatorLanguage) - A React Hooks package for navigator-language +- [useOnWindowResize](https://react-hooks.org/docs/useOnWindowResize) - A React hook for window on resize event +- [useOnWindowScroll](https://react-hooks.org/docs/useOnWindowScroll) - A React hook for window on scroll event +- [useOnline](https://react-hooks.org/docs/useOnline) - A React Hooks package for online +- [useOutsideClickRef](https://react-hooks.org/docs/useOutsideClickRef) - A hook that can track a click event outside a ref. Returns a callbackRef. +- [useOutsideClick](https://react-hooks.org/docs/useOutsideClick) - React hook for tracking clicks outside a ref +- [usePreviousDifferent](https://react-hooks.org/docs/usePreviousDifferent) - usePreviousDifferent hooks returns the last different value of a variable +- [usePreviousImmediate](https://react-hooks.org/docs/usePreviousImmediate) - usePreviousImmediate returns the previous value of a variable even if it was the same or different +- [usePrevious](https://react-hooks.org/docs/usePrevious) - Access the previous value of a variable with this React hook +- [useQueueState](https://react-hooks.org/docs/useQueueState) - A React hook that manages state in the form of a queue +- [useRaf](https://react-hooks.org/docs/useRaf) - A continuously running requestAnimationFrame hook for React +- [useSelect](https://react-hooks.org/docs/useSelect) - A React Hooks package for select +- [useSelectableList](https://react-hooks.org/docs/useSelectableList) - Easily select a single value from a list of values. very useful for radio buttons, select inputs etc. +- [useSessionstorageState](https://react-hooks.org/docs/useSessionstorageState) - useState but syncs with sessionstorage +- [useSessionstorage](https://react-hooks.org/docs/useSessionstorage) - Session storage react hook. Easily manage session storage values +- [useStackState](https://react-hooks.org/docs/useStackState) - A React hook that manages state in the form of a stack +- [useThrottle](https://react-hooks.org/docs/useThrottle) - A throttle hook for react +- [useTimeAgo](https://react-hooks.org/docs/useTimeAgo) - A React Hook to get time ago for timestamp millisecond value +- [useTimeoutWhen](https://react-hooks.org/docs/useTimeoutWhen) - Takes a callback and fires it when a condition is true +- [useTimeout](https://react-hooks.org/docs/useTimeout) - A React Hooks package for timeout +- [useToggle](https://react-hooks.org/docs/useToggle) - A React Hooks package for toggle +- [useUndoState](https://react-hooks.org/docs/useUndoState) - Drop in replacement for useState hook but with undo functionality. +- [useUpdateEffect](https://react-hooks.org/docs/useUpdateEffect) - An useEffect that does not run on first render +- [useVisibilitySensor](https://react-hooks.org/docs/useVisibilitySensor) - A React Hooks package for visibility-sensor +- [useWillUnmount](https://react-hooks.org/docs/useWillUnmount) - A React hook for componentWillUnmount lifecycle method +- [useWindowEventListener](https://react-hooks.org/docs/useWindowEventListener) - Adds an event listener to window +- [useWindowScrollPosition](https://react-hooks.org/docs/useWindowScrollPosition) - A React hook to get the scroll position of the window +- [useWindowSize](https://react-hooks.org/docs/useWindowSize) - A React Hooks package for window-size +- [useWorker](https://react-hooks.org/docs/useWorker) - A React Hooks package for worker + + + +## About + +Standalone build for all rooks. This package contains all the hooks built as part of the rooks project. + +**Note:** If you only need a few hooks from the rooks package, it's prefereable to install individiual hooks from npm instead of the standalone rooks build. In other words, install `@rooks/useDidMount` instead of `rooks` if you only need the `useDidMount` functionality. + +## Installation + + npm i - s rooks + +Import any hook from "rooks" and start using them! + +```jsx +import { useDidMount } from 'rooks'; +``` + +## Usage + +```jsx +function App() { + useDidMount(() => { + alert('mounted'); + }); + return ( +
+

Hello CodeSandbox

+

Start editing to see some magic happen!

+
+ ); +} +``` + +
+ +## License + +MIT + +## Join Bhargav's discord server + +You can click on the floating discord icon at the bottom right of the screen and talk to us in our server. diff --git a/versioned_docs/version-5.4.3/useBoundingclientrect.md b/versioned_docs/version-5.4.3/useBoundingclientrect.md new file mode 100644 index 0000000000..98edc49831 --- /dev/null +++ b/versioned_docs/version-5.4.3/useBoundingclientrect.md @@ -0,0 +1,109 @@ +--- +id: useBoundingclientrect +title: useBoundingclientrect +sidebar_label: useBoundingclientrect +--- + +## About + +getBoundingClientRect hook for React. +
+ +## Installation + + npm install --save rooks + +## Importing the hook + +```javascript +import { useBoundingclientrect } from 'rooks'; +``` + +## Usage + +```jsx +function Demo() { + const myRef = useRef(); + const getBoundingClientRect = useBoundingclientrect(myRef); + const [XOffset, setXOffset] = useState(0); + const [YOffset, setYOffset] = useState(300); + const displayString = JSON.stringify(getBoundingClientRect, null, 2); + return ( + <> +
+
+

+ Resize this div as you see fit. To demonstrate that it also updates + on child dom nodes resize +

+
+

Bounds

+

+ + +

+

+ + +

+
+
+ 
{displayString}
+
+ + ); +} + +render(); +``` + +### Arguments + +| Argument | Type | Description | +| -------- | --------- | ------------------------------------------------- | +| ref | React ref | React ref whose boundingClientRect is to be found | + +### Return + +| Return value | Type | Description | Default value | +| ------------ | ------- | ---------------------------------------------------------------------------- | ------------- | +| value | DOMRect | DOMRect Object containing x,y, width, height, left,right,top and bottom keys | null | + +## Codesandbox Example + +### BAsic Usage + +