-
-
Notifications
You must be signed in to change notification settings - Fork 216
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(docs): Update changelog and docs
- Loading branch information
1 parent
7e64d10
commit 1fa5c0b
Showing
79 changed files
with
6,190 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className="App"> | ||
| <h1>Hello CodeSandbox</h1> | ||
| <h2>Start editing to see some magic happen!</h2> | ||
| </div> | ||
| ); | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <iframe src="https://codesandbox.io/embed/dawn-bush-z4kgg?fontsize=18&hidenavigation=1&module=%2Fsrc%2FRooks.js&theme=dark&editorsize=60" | ||
| style={{ | ||
| width: "100%", | ||
| height: 500, | ||
| border: 0, | ||
| borderRadius: 4, | ||
| overflow: "hidden" | ||
| }} | ||
| title="dawn-bush-z4kgg" | ||
| allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" | ||
| sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" | ||
| ></iframe> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| --- | ||
| id: hooks-list | ||
| title: List of Hooks | ||
| sidebar_label: Hooks List | ||
| --- | ||
|
|
||
| <!--hookslist start--> | ||
|
|
||
| - [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 | ||
| - [useRefElement](https://react-hooks.org/docs/useRefElement) - Helps bridge gap between callback ref and state | ||
| - [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. | ||
|
|
||
| <!--hookslist end--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| --- | ||
| id: rooks | ||
| title: rooks | ||
| sidebar_label: rooks | ||
| slug: / | ||
| --- | ||
|
|
||
| <img src="https://github.com/imbhargav5/rooks/raw/master/.github/assets/logo-dark.png" height="auto" width="100%" /> | ||
|
|
||
| <br/> | ||
|
|
||
| [](https://gyazo.com/742dc22ec370af0a96322427b6a32a9b) | ||
|
|
||
| ## 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 ( | ||
| <div className="App"> | ||
| <h1>Hello CodeSandbox</h1> | ||
| <h2>Start editing to see some magic happen!</h2> | ||
| </div> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| <br/> | ||
|
|
||
| ## 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| --- | ||
| id: useBoundingclientrect | ||
| title: useBoundingclientrect | ||
| sidebar_label: useBoundingclientrect | ||
| --- | ||
|
|
||
| ## About | ||
|
|
||
| getBoundingClientRect hook for React. | ||
| <br/> | ||
|
|
||
| ## 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 ( | ||
| <> | ||
| <div | ||
| style={{ | ||
| width: 300, | ||
| background: "lightblue", | ||
| padding: "10px", | ||
| position: "absolute", | ||
| left: XOffset, | ||
| top: YOffset, | ||
| }} | ||
| ref={myRef} | ||
| > | ||
| <div | ||
| style={{ | ||
| resize: "both", | ||
| overflow: "auto", | ||
| background: "white", | ||
| color: "blue", | ||
| maxWidth: "100%", | ||
| }} | ||
| > | ||
| <p> | ||
| Resize this div as you see fit. To demonstrate that it also updates | ||
| on child dom nodes resize | ||
| </p> | ||
| </div> | ||
| <h2>Bounds</h2> | ||
| <p> | ||
| <button onClick={() => setXOffset(XOffset - 5)}> Move Left </button> | ||
| <button onClick={() => setXOffset(XOffset + 5)}> Move Right </button> | ||
| </p> | ||
| <p> | ||
| <button onClick={() => setYOffset(YOffset - 5)}> Move Up </button> | ||
| <button onClick={() => setYOffset(YOffset + 5)}> Move Down </button> | ||
| </p> | ||
| </div> | ||
| <div style={{ height: 500 }}> | ||
| <pre>{displayString}</pre> | ||
| </div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| render(<Demo />); | ||
| ``` | ||
|
|
||
| ### 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 | ||
|
|
||
| <iframe src="https://codesandbox.io/embed/useboundingclientrect-7zbcd?fontsize=14&hidenavigation=1&theme=dark" | ||
| style={{ | ||
| width: "100%", | ||
| height: 500, | ||
| border: 0, | ||
| borderRadius: 4, | ||
| overflow: "hidden" | ||
| }} | ||
| title="useBoundingclientrect" | ||
| allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" | ||
| sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" | ||
| /> | ||
|
|
||
| ## 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. |
Oops, something went wrong.