43 |
46 |
49 |
50 | );
51 | };
52 | export default Page;
53 | ```
54 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useFreshCallback.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useFreshCallback
3 | title: useFreshCallback
4 | sidebar_label: useFreshCallback
5 | ---
6 |
7 | ## About
8 |
9 | Avoid stale closures and keep your callback fresh
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import {useFreshCallback} from "rooks"
15 | export default function App() {
16 | useFreshCallback();
17 | return null
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useGetIsMounted.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useGetIsMounted
3 | title: useGetIsMounted
4 | sidebar_label: useGetIsMounted
5 | ---
6 |
7 | ## About
8 |
9 | Checks if a component is mounted or not at the time. Useful for async effects
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ### Basic usage
16 |
17 | ```jsx
18 | import { useEffect } from "react";
19 | import { useGetIsMounted } from "rooks";
20 | export default function App() {
21 | const getIsMounted = useGetIsMounted();
22 | useEffect(() => {
23 | alert("Mounted " + String(getIsMounted()));
24 | }, []);
25 | return null;
26 | }
27 | ```
28 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useIsDroppingFiles.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useIsDroppingFiles
3 | title: useIsDroppingFiles
4 | sidebar_label: useIsDroppingFiles
5 | ---
6 |
7 | ## About
8 |
9 | Check if any files are currently being dropped anywhere. Useful for highlighting drop areas.
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import { useIsDroppingFiles } from "rooks";
15 | export default function App() {
16 | useIsDroppingFiles();
17 | return null;
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useKeyBindings.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useKeyBindings
3 | title: useKeyBindings
4 | sidebar_label: useKeyBindings
5 | ---
6 |
7 | ## About
8 |
9 | useKeyBindings can bind pairs of keyboard events and handlers.
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ```jsx
16 | import "./styles.css";
17 | import { useKeyBindings, useCounter } from "rooks";
18 |
19 | export default function App() {
20 | const { value, increment, incrementBy, decrementBy, reset } = useCounter(0);
21 | const cb1 = () => increment();
22 | const cb2 = () => decrementBy(3);
23 | const cb3 = () => incrementBy(5);
24 | const cb4 = () => reset();
25 |
26 | useKeyBindings({ a: cb1, b: cb2, Enter: cb3, Escape: cb4 });
27 |
28 | return (
29 |
30 |
34 | );
35 | }
36 | ```
37 |
38 | ### Arguments
39 |
40 | | Argument | Type | Description | Default value |
41 | | ----------- | ------- | ------------------------------------- | ------------- |
42 | | keyBindings | Object | pairs of keyboard events and handlers | {} |
43 | | options | Options | refer to useKey | {} |
44 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useLifecycleLogger.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useLifecycleLogger
3 | title: useLifecycleLogger
4 | sidebar_label: useLifecycleLogger
5 | ---
6 |
7 | ## About
8 |
9 | A react hook that console logs parameters as component transitions through lifecycles.
10 |
11 | [//]: # "Main"
12 |
13 | ## Installation
14 |
15 | ## Examples
16 |
17 | ```jsx
18 | import "./styles.css";
19 | import { useLifecycleLogger } from "rooks";
20 | import { useEffect, useState } from "react";
21 |
22 | export default function App() {
23 | const [value, setValue] = useState(0);
24 |
25 | useEffect(() => {
26 | setValue(1);
27 | }, []);
28 |
29 | useLifecycleLogger("Demo", value);
30 |
31 | return (
32 | 31 | Counter value is : {value} 32 |
33 |
33 |
36 | );
37 | }
38 | ```
39 |
40 | ### Arguments
41 |
42 | | Argument value | Type | Description | Defualt |
43 | | -------------- | ------ | -------------------------------------------------------- | ----------- |
44 | | componentName | String | The name of component to be shown in the log | "Component" |
45 | | rest | Array | An arry of variables to be logged in component lifecycle | undefined |
46 |
47 | ### Returns
48 |
49 | No return value
50 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useLockBodyScroll.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useLockBodyScroll
3 | title: useLockBodyScroll
4 | sidebar_label: useLockBodyScroll
5 | ---
6 |
7 | ## About
8 |
9 | Locks or unlocks body scroll
10 |
11 | ## Examples
12 |
13 | ### Basic
14 |
15 | ```tsx
16 | import { useState } from "react";
17 | import { useLockBodyScroll } from "rooks";
18 |
19 | export default function App() {
20 | const [isLocked, setIsLocked] = useState(false);
21 |
22 | // Lock body scroll when isLocked is true
23 | useLockBodyScroll(isLocked);
24 |
25 | return (
26 | useLifecycleLogger example
34 |See console for logs
35 |
27 |
30 |
31 | );
32 | }
33 | ```
34 |
35 | ## Arguments
36 |
37 | | Argument | Type | Description |
38 | | -------- | ------- | ------------------------------------------------ |
39 | | isLocked | boolean | Whether to lock or unlock scroll on the body tag |
40 |
41 | ---
42 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useMergeRefs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useMergeRefs
3 | title: useMergeRefs
4 | sidebar_label: useMergeRefs
5 | ---
6 |
7 | ## About
8 |
9 | Merges any number of refs into a single ref
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ```jsx
16 | import "./styles.css";
17 | import { useMergeRefs, useEventListenerRef } from "rooks";
18 |
19 | function App() {
20 | const mousedownRef = useEventListenerRef("mousedown", () => {
21 | console.log("mouse down");
22 | });
23 | const mouseupRef = useEventListenerRef("mouseup", () => {
24 | console.log("mouse up");
25 | });
26 | const refs = useMergeRefs(mousedownRef, mouseupRef);
27 |
28 | return (
29 |
30 |
32 |
43 | );
44 | }
45 | export default App;
46 | ```
47 |
48 | ### Arguments
49 |
50 | | Argument value | Type | Description |
51 | | -------------- | ----- | -------------------------------------------------------------------- |
52 | | refs | Array | Takes any number of refs. Refs can be mutable refs or function refs. |
53 |
54 | ### Returns
55 |
56 | | Return value | Type | Description |
57 | | ------------ | ----------- | ----------- |
58 | | ref | CallbackRef | Merged ref |
59 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useMouse.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useMouse
3 | title: useMouse
4 | sidebar_label: useMouse
5 | ---
6 |
7 | ## About
8 |
9 | ### Description
10 |
11 | Mouse position hook for React.
12 | Rooks : useMergeRefs Example
31 |32 |
40 | A div with multiple refs. Click me!!
41 |
42 | 13 | 14 | ### Return value 15 | 16 | useMouse returns a single object containing the mouse position. 17 | 18 | | Returned object attributes | Type | Description | 19 | | -------------------------- | ---- | ------------------- | 20 | | x | int | X position of mouse | 21 | | y | int | Y position of mouse | 22 | 23 |
24 | ## Examples 25 | ### Basic Usage 26 | 27 | ```jsx 28 | import { useMouse } from "rooks"; 29 | 30 | export default function App() { 31 | const { x, y } = useMouse(); 32 | return ( 33 | <> 34 |
Move mouse here to see changes to position
35 |X position is {x || "null"}
36 |X position is {y || "null"}
37 | 38 | ); 39 | } 40 | ``` 41 | 42 |43 | -------------------------------------------------------------------------------- /apps/website/content/docs/hooks/useMouseMoveDelta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: useMouseMoveDelta 3 | title: useMouseMoveDelta 4 | sidebar_label: useMouseMoveDelta 5 | --- 6 | 7 | ## About 8 | 9 | Tracks delta of mouse move 10 | 11 | ## Examples 12 | 13 | ```tsx 14 | import {useMouseMoveDelta} from "rooks" 15 | export default function App() { 16 | useMouseMoveDelta(); 17 | return null 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /apps/website/content/docs/hooks/useMouseWheelDelta.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: useMouseWheelDelta 3 | title: useMouseWheelDelta 4 | sidebar_label: useMouseWheelDelta 5 | --- 6 | 7 | ## About 8 | 9 | Tracks delta of mouse move 10 | 11 | ## Examples 12 | 13 | ```tsx 14 | import {useMouseWheelDelta} from "rooks" 15 | export default function App() { 16 | useMouseWheelDelta(); 17 | return null 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /apps/website/content/docs/hooks/useNativeMapState.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: useNativeMapState 3 | title: useNativeMapState 4 | sidebar_label: useNativeMapState 5 | --- 6 | 7 | ## About 8 | 9 | Manage Map() object state in React 10 | 11 | ## Examples 12 | 13 | ```tsx 14 | import { useNativeMapState } from "rooks"; 15 | export default function App() { 16 | useNativeMapState(); 17 | return null; 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /apps/website/content/docs/hooks/useNavigatorLanguage.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: useNavigatorLanguage 3 | title: useNavigatorLanguage 4 | sidebar_label: useNavigatorLanguage 5 | --- 6 | 7 | ## About 8 | 9 | Navigator Language hook for React. 10 | 11 | ## Examples 12 | 13 | ```jsx 14 | import "./styles.css"; 15 | import { useNavigatorLanguage } from "rooks"; 16 | 17 | function App() { 18 | const language = useNavigatorLanguage(); 19 | 20 | return ( 21 |
24 |
29 | );
30 | }
31 |
32 | export default App;
33 | ```
34 |
35 | ### Return value
36 |
37 | A language (String) is returned.
38 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useOnClickRef.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useOnClickRef
3 | title: useOnClickRef
4 | sidebar_label: useOnClickRef
5 | ---
6 |
7 | ## About
8 |
9 | Callback on click/tap events
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import { useOnClickRef } from "rooks";
15 | export default function App() {
16 | useOnClickRef();
17 | return null;
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useOnHoverRef.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useOnHoverRef
3 | title: useOnHoverRef
4 | sidebar_label: useOnHoverRef
5 | ---
6 |
7 | ## About
8 |
9 | On hover callback hook
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import {useOnHoverRef} from "rooks"
15 | export default function App() {
16 | useOnHoverRef();
17 | return null
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useOnWindowResize.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useOnWindowResize
3 | title: useOnWindowResize
4 | sidebar_label: useOnWindowResize
5 | ---
6 |
7 | ## About
8 |
9 | A React hook for adding an event listener for window resize
10 |
11 | ## Examples
12 |
13 | ```jsx
14 | import "./styles.css";
15 | import { useOnWindowResize } from "rooks";
16 |
17 | export default function App() {
18 | useOnWindowResize(() => console.log("window resized"));
19 |
20 | return (
21 | Rooks : useNavigatorLanguage example
25 |26 | Language is {language} 27 |
28 |
22 |
25 | );
26 | }
27 | ```
28 |
29 | ### Arguments
30 |
31 | | Arguments | Type | Description | Default value |
32 | | -------------- | -------- | ----------------------------------------------- | ------------- |
33 | | callback | function | Callback function which needs to run on unmount | undefined |
34 | | when | boolean | When the event handler should be active | true |
35 | | isLayoutEffect | boolean | Should it use layout effect. | false |
36 |
37 | ### Returns
38 |
39 | No return value.
40 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useOnline.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useOnline
3 | title: useOnline
4 | sidebar_label: useOnline
5 | ---
6 |
7 | ## About
8 |
9 | Online status hook for React.
10 |
11 | ### Examples
12 |
13 | ```jsx
14 | import "./styles.css";
15 | import { useOnline } from "rooks";
16 |
17 | function App() {
18 | const online = useOnline();
19 | console.log("I'm online");
20 |
21 | return (
22 | useOnWindowResize example
23 |Resize the window and see the logs
24 |
23 |
26 |
30 | );
31 | }
32 |
33 | export default App;
34 | ```
35 |
36 | ### Return value
37 |
38 | Offline status (boolean) is returned.
39 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useOrientation.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useOrientation
3 | title: useOrientation
4 | sidebar_label: useOrientation
5 | ---
6 |
7 | ## About
8 |
9 | orientation hook for react
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import {useOrientation} from "rooks"
15 | export default function App() {
16 | useOrientation();
17 | return null
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/usePromise.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: usePromise
3 | title: usePromise
4 | sidebar_label: usePromise
5 | ---
6 |
7 | ## About
8 |
9 | Promise management hook for react
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import {usePromise} from "rooks"
15 | export default function App() {
16 | usePromise();
17 | return null
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useRenderCount.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useRenderCount
3 | title: useRenderCount
4 | sidebar_label: useRenderCount
5 | ---
6 |
7 | ## About
8 |
9 | Get the render count of a component
10 |
11 | ## Examples
12 |
13 | TODO: Add an example here.
14 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useSafeSetState.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useSafeSetState
3 | title: useSafeSetState
4 | sidebar_label: useSafeSetState
5 | ---
6 |
7 | ## About
8 |
9 | set state but ignores if component has already unmounted
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import {useSafeSetState} from "rooks"
15 | export default function App() {
16 | useSafeSetState();
17 | return null
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useSessionstorageState.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useSessionstorageState
3 | title: useSessionstorageState
4 | sidebar_label: useSessionstorageState
5 | ---
6 |
7 | ## About
8 |
9 | useState but syncs with sessionstorage
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ```jsx
16 | import "./styles.css";
17 | import React from "react";
18 | import { useSessionstorageState } from "rooks";
19 |
20 | export default function App() {
21 | const [count, setCount] = useSessionstorageState("my-app:count", 0);
22 |
23 | return (
24 | Rooks: useOnline example
24 | 25 |26 |
27 | Status:You are {online ? "Online" : "Offline"}
28 |
29 |
25 |
30 | );
31 | }
32 | ```
33 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useSetState.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useSetState
3 | title: useSetState
4 | sidebar_label: useSetState
5 | ---
6 |
7 | ## About
8 |
9 | Manage the state of a Set in React. Exposes add, delete and clear methods along with the current set to easily manipulate values in a set.
10 |
11 | ## Examples
12 |
13 | ```jsx
14 | import { useSetState } from "rooks";
15 | export default function App() {
16 | useSetState();
17 | return null;
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useSpeech.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useSpeech
3 | title: useSpeech
4 | sidebar_label: useSpeech
5 | ---
6 |
7 | ## About
8 |
9 | Speech synthesis hook for React
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import {useSpeech} from "rooks"
15 | export default function App() {
16 | useSpeech();
17 | return null
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useTimeTravelState.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useTimeTravelState
3 | title: useTimeTravelState
4 | sidebar_label: useTimeTravelState
5 | ---
6 |
7 | ## About
8 |
9 | A hook that manages state which can undo and redo. A more powerful version of useUndoState hook.
10 |
11 | ## Examples
12 |
13 | ### Basic example
14 |
15 | ```tsx
16 | import { useTimeTravelState } from "rooks";
17 | export default function App() {
18 | const [value, setValue, controls] = useTimeTravelState(0);
19 |
20 | return (
21 | Rooks : useSessionstorageState
26 |Refresh the page to see the previous value in tact
27 | 28 | 29 |
22 | Current value: {value}
23 |
24 |
29 | 30 | 31 | 32 |
33 | );
34 | }
35 | ```
36 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useTimeoutWhen.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useTimeoutWhen
3 | title: useTimeoutWhen
4 | sidebar_label: useTimeoutWhen
5 | ---
6 |
7 | ## About
8 |
9 | Takes a callback and fires it when a condition is true
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ### Basic usage
16 |
17 | ```jsx
18 | import "./styles.css";
19 | import { useTimeoutWhen } from "rooks";
20 | import { useState } from "react";
21 |
22 | function App() {
23 | const [start, setStart] = useState(false);
24 | useTimeoutWhen(() => setStart(false), 2000, start);
25 | return (
26 | <>
27 | 24 |
25 | Can undo: {String(controls.canUndo)} 26 | Can redo: {String(controls.canRedo)} 27 |
28 |29 | 30 | 31 | 32 |
Rooks: useTimeoutWhen example
28 |29 |
Click the button below to disable it for 2 seconds
30 | 33 | 34 | ); 35 | } 36 | 37 | export default App; 38 | ``` 39 | 40 | ### Arguments 41 | 42 | | Arguments | Type | Description | Default value | 43 | | --------- | -------- | -------------------------------------------------------- | ------------- | 44 | | callback | function | Function to be executed in timeout | undefind | 45 | | delay | Number | Number in milliseconds after which callback is to be run | 0 | 46 | | when | boolean | The condition which when true, sets the timeout | true | 47 | 48 | ### Returned 49 | 50 | No return value. 51 | -------------------------------------------------------------------------------- /apps/website/content/docs/hooks/useUndoRedoState.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: useUndoRedoState 3 | title: useUndoRedoState 4 | sidebar_label: useUndoRedoState 5 | --- 6 | 7 | ## About 8 | 9 | Setstate but can also undo and redo 10 | 11 | ## Examples 12 | 13 | ```tsx 14 | import {useUndoRedoState} from "rooks" 15 | export default function App() { 16 | useUndoRedoState(); 17 | return null 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /apps/website/content/docs/hooks/useVibrate.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: useVibrate 3 | title: useVibrate 4 | sidebar_label: useVibrate 5 | --- 6 | 7 | ## About 8 | 9 | Vibration API hook for React 10 | 11 | ## Examples 12 | 13 | ```tsx 14 | import {useVibrate} from "rooks" 15 | export default function App() { 16 | useVibrate(); 17 | return null 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /apps/website/content/docs/hooks/useVideo.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: useVideo 3 | title: useVideo 4 | sidebar_label: useVideo 5 | --- 6 | 7 | ## About 8 | 9 | Video hook for react 10 | 11 | ## Examples 12 | 13 | ```tsx 14 | import {useVideo} from "rooks" 15 | export default function App() { 16 | useVideo(); 17 | return null 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /apps/website/content/docs/hooks/useWhyDidYouUpdate.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: useWhyDidYouUpdate 3 | title: useWhyDidYouUpdate 4 | sidebar_label: useWhyDidYouUpdate 5 | --- 6 | 7 | ## About 8 | 9 | A hook that can track which value change caused a rerender 10 | 11 | ## Examples 12 | 13 | ```tsx 14 | import {useWhyDidYouUpdate} from "rooks" 15 | export default function App() { 16 | useWhyDidYouUpdate(); 17 | return null 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /apps/website/content/docs/hooks/useWillUnmount.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: useWillUnmount 3 | title: useWillUnmount 4 | sidebar_label: useWillUnmount 5 | --- 6 | 7 | ### About 8 | 9 | A React hook for componentWillUnmount lifecycle method. 10 | 11 | ### Examples 12 | 13 | ```jsx 14 | import "./styles.css"; 15 | import { useState } from "react"; 16 | import { useWillUnmount } from "rooks"; 17 | 18 | function Message() { 19 | useWillUnmount(function(props) { 20 | console.log("UNMOUNT", props); 21 | }); 22 | returnThis component will unmount
; 23 | } 24 | 25 | const App = () => { 26 | const [shouldRender, enableRender] = useState(true); 27 | return ( 28 |
29 |
31 | 32 |
46 | );
47 | };
48 |
49 | export default App;
50 | ```
51 |
52 | #### Arguments
53 |
54 | | Arguments | Type | Description | Default value |
55 | | --------- | -------- | ----------------------------------------------- | ------------- |
56 | | callback | function | Callback function which needs to run on unmount | undefined |
57 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useWindowEventListener.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useWindowEventListener
3 | title: useWindowEventListener
4 | sidebar_label: useWindowEventListener
5 | ---
6 |
7 | ## About
8 |
9 | Adds an event listener to window
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ### Basic usage
16 |
17 | ```jsx
18 | import { useState } from "react";
19 | import { useWindowEventListener } from "rooks";
20 | import "./styles.css";
21 |
22 | export default function App() {
23 | const [value, setValue] = useState(0);
24 | useWindowEventListener("click", function() {
25 | setValue(value + 1);
26 | });
27 | return (
28 | Rook: useWillUnmount Example
30 |31 | 32 |
39 |
40 |
45 | 40 |
Check or Uncheck the box
41 | enableRender(!shouldRender)} type="checkBox" /> 42 | 43 | {shouldRender &&
34 |
37 | );
38 | }
39 | ```
40 |
41 | ---
42 |
--------------------------------------------------------------------------------
/apps/website/content/docs/hooks/useWindowScrollPosition.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | id: useWindowScrollPosition
3 | title: useWindowScrollPosition
4 | sidebar_label: useWindowScrollPosition
5 | ---
6 |
7 | ## About
8 |
9 | A React hook to get the scroll position of the window
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ### Basic Usage
16 |
17 | ```jsx
18 | import "./styles.css";
19 | import { useWindowScrollPosition } from "rooks";
20 |
21 | function App() {
22 | const position = useWindowScrollPosition(); // default config: { wait = 100, passive = true }
23 | console.log(position); // {x: ..., y: ...}
24 | return (
25 | Click anywhere
35 |Value is {value}
36 |
26 |
28 | 29 |
32 | );
33 | }
34 |
35 | export default App;
36 | ```
37 |
--------------------------------------------------------------------------------
/apps/website/content/docs/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Rooks.js
3 | ---
4 |
5 | ## Introduction
6 |
7 | Essential React custom hooks ⚓ to super charge your components!
8 |
9 | ## Contributors
10 |
11 | Rooks : useWindowScrollPosition Example
27 |28 | 29 |
Scroll
30 |{JSON.stringify(position)}
31 |
30 |
33 | );
34 | }
35 | ```
36 |
--------------------------------------------------------------------------------
/apps/website/src/pages/home-sandbox.md:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/apps/website/src/pages/motivation.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: motivation
3 | title: Motivation
4 | sidebar_label: Motivation
5 | ---
6 |
7 | 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.
8 |
9 | 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.
10 |
11 | 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.
12 |
13 | **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.
14 |
--------------------------------------------------------------------------------
/apps/website/src/providers/QueryProvider.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
4 | import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
5 | import { useState, type ReactNode } from 'react';
6 |
7 | interface QueryProviderProps {
8 | children: ReactNode;
9 | }
10 |
11 | export function QueryProvider({ children }: QueryProviderProps) {
12 | const [queryClient] = useState(
13 | () =>
14 | new QueryClient({
15 | defaultOptions: {
16 | queries: {
17 | staleTime: 60 * 1000, // 1 minute
18 | gcTime: 5 * 60 * 1000, // 5 minutes
19 | refetchOnWindowFocus: false,
20 | },
21 | },
22 | })
23 | );
24 |
25 | return (
26 | Hello CodeSandbox
31 |Start editing to see some magic happen!
32 |
9 |
10 | 11 | 12 | [](https://gyazo.com/742dc22ec370af0a96322427b6a32a9b) 13 | 14 | ## About 15 | 16 | Standalone build for all rooks. This package contains all the hooks built as part of the rooks project. 17 | 18 | **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. 19 | 20 | ## Installation 21 | 22 | npm i - s rooks 23 | 24 | Import any hook from "rooks" and start using them! 25 | 26 | ```jsx 27 | import { useDidMount } from "rooks"; 28 | ``` 29 | 30 | ## Examples 31 | 32 | ```jsx 33 | function App() { 34 | useDidMount(() => { 35 | alert("mounted"); 36 | }); 37 | return ( 38 |
39 |
42 | );
43 | }
44 | ```
45 |
46 | Hello CodeSandbox
40 |Start editing to see some magic happen!
41 |47 | 48 | ## License 49 | 50 | MIT 51 | -------------------------------------------------------------------------------- /data/docs/useArrayState.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useArrayState 3 | title: useArrayState 4 | sidebar_label: useArrayState 5 | --- 6 | 7 | ## About 8 | 9 | Array state manager hook for React. It exposes push, pop, unshift, shift, concat, fill and reverse methods to be able to easily modify the state of an array. 10 | 11 | ## Examples 12 | 13 | ```jsx 14 | import { useArrayState, useInput } from "rooks"; 15 | export default function App() { 16 | const [array, controls] = useArrayState([1, 2, 3]); 17 | const numberInput = useInput(0); 18 | 19 | return
20 |
;
27 | }
28 |
29 | ```
30 |
--------------------------------------------------------------------------------
/data/docs/useAsyncEffect.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useAsyncEffect
3 | title: useAsyncEffect
4 | sidebar_label: useAsyncEffect
5 | ---
6 |
7 | ## About
8 |
9 | This is a version of `useEffect` that accepts an async function.
10 |
11 | `useEffect` only works with effect functions that run synchronously. The go-to solution for most people is to simply run an async function inside `useEffect`, but that approach has a lot of gotchas involving React state manipulation.
12 |
13 | [//]: # "Main"
14 |
15 | ## Examples
16 |
17 | ### Basic example
18 |
--------------------------------------------------------------------------------
/data/docs/useDebounce.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useDebounce
3 | title: useDebounce
4 | sidebar_label: useDebounce
5 | ---
6 |
7 | ## About
8 |
9 | Debounce hook for react. Internally, it uses lodash debounce.
10 |
11 | ## Examples
12 |
13 | ```jsx
14 | import React, { useState } from "react";
15 | import { useDebounce } from "rooks";
16 |
17 | export default function App() {
18 | const [value, setValue] = useState("");
19 | const setValueDebounced = useDebounce(setValue, 500);
20 |
21 | return (
22 | Array items are - {array.join(",")}
21 | 22 | 26 |
23 | setValueDebounced(e.target.value)}
25 | placeholder="Please type here"
26 | />
27 |
29 | );
30 | }
31 | ```
32 |
33 | ### Arguments
34 |
35 | | Argument | Type | Description | Default value |
36 | | -------- | -------- | ---------------------------------------- | ------------- |
37 | | callback | Function | The function to debounce | undefined |
38 | | wait | number | The duration to debounce in milliseconds | undefined |
39 | | options | Object | options to pass into lodash's debounce | {} |
40 |
41 | ### Return Value
42 |
43 | | Name | Type | Description |
44 | | ----------------- | -------- | ---------------------- |
45 | | debouncedFunction | Function | The debounced function |
46 |
--------------------------------------------------------------------------------
/data/docs/useDebounceFn.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useDebounceFn
3 | title: useDebounceFn
4 | sidebar_label: useDebounceFn
5 | ---
6 |
7 | ## About
8 |
9 | Powerful debounce function hook for React
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import {useDebounceFn} from "rooks"
15 | export default function App() {
16 | useDebounceFn();
17 | return null
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/data/docs/useDeepCompareEffect.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useDeepCompareEffect
3 | title: useDeepCompareEffect
4 | sidebar_label: useDeepCompareEffect
5 | ---
6 |
7 | ## About
8 |
9 | Deep compare dependencies instead of shallow for useEffect
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import {useDeepCompareEffect} from "rooks"
15 | export default function App() {
16 | useDeepCompareEffect();
17 | return null
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/data/docs/useDidMount.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useDidMount
3 | title: useDidMount
4 | sidebar_label: useDidMount
5 | ---
6 |
7 | ## About
8 |
9 | componentDidMount hook for React
10 | {value}
28 | 11 | 12 | ## Examples 13 | 14 | ```jsx 15 | import { useDidMount } from "rooks"; 16 | export default function App() { 17 | useDidMount(function() { 18 | console.log("mounted"); 19 | }); 20 | return null; 21 | } 22 | ``` 23 | 24 | ## Arguments 25 | 26 | | Argument | Type | Description | 27 | | -------- | -------- | ------------------------------ | 28 | | callback | function | function to be called on mount | 29 | 30 | --- 31 | -------------------------------------------------------------------------------- /data/docs/useDidUpdate.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useDidUpdate 3 | title: useDidUpdate 4 | sidebar_label: useDidUpdate 5 | --- 6 | 7 | ## About 8 | 9 | componentDidUpdate hook for react 10 | 11 | ## Examples 12 | 13 | ```jsx 14 | import React, { useState } from "react"; 15 | import { useDidUpdate } from "rooks"; 16 | 17 | export default function App() { 18 | const [value, setValue] = useState(0); 19 | useDidUpdate(() => { 20 | console.log("This message was logged on update."); 21 | }); 22 | return ( 23 |
24 |
29 | );
30 | }
31 | ```
32 |
--------------------------------------------------------------------------------
/data/docs/useDocumentEventListener.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useDocumentEventListener
3 | title: useDocumentEventListener
4 | sidebar_label: useDocumentEventListener
5 | ---
6 |
7 | ## About
8 |
9 | A react hook to an event listener to the document object
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ```jsx
16 | import { useDocumentEventListener } from "rooks";
17 | import { useState, useEffect } from "react";
18 |
19 | export default function App() {
20 | const [myState, setMyState] = useState(0);
21 |
22 | useDocumentEventListener("click", function() {
23 | setMyState(myState + 1);
24 | });
25 |
26 | return (
27 | Update this value by clicking on the button
25 |Current value is {value}
26 |Open the sandbox in codesandbox to view the console
27 | 28 |
28 |
30 |
32 | );
33 | }
34 | ```
35 |
36 | ### Arguments
37 |
38 | | Arguments | Type | Description | Default value |
39 | | -------------- | -------- | ---------------------------------------------- | ------------- |
40 | | eventName | string | The event to track | undefind |
41 | | callback | function | The callback to be called on event | undefined |
42 | | conditions | object | The options to be passed to the event listener | {} |
43 | | isLayoutEffect | boolean | Should it use layout effect. Defaults to false | false |
44 |
45 | ### Return
46 |
47 | No return value.
48 |
--------------------------------------------------------------------------------
/data/docs/useDocumentVisibilityState.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useDocumentVisibilityState
3 | title: useDocumentVisibilityState
4 | sidebar_label: useDocumentVisibilityState
5 | ---
6 |
7 | ## About
8 |
9 | Returns the visibility state of the document. Returns `null` on the server.
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import {useEffect} from 'react'
15 | import {useDocumentVisibilityState} from "rooks"
16 |
17 | export default function App() {
18 | const isDocumentVisible = useDocumentVisibilityState();
19 | useEffect(() => {
20 | console.log(isDocumentVisible)
21 | }, [isDocumentVisible])
22 | return useDocumentEventListener Example
29 |30 |
Clicked {myState} times
31 |Try switching to a different tab and check console
23 | } 24 | ``` 25 | -------------------------------------------------------------------------------- /data/docs/useEffectOnceWhen.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useEffectOnceWhen 3 | title: useEffectOnceWhen 4 | sidebar_label: useEffectOnceWhen 5 | --- 6 | 7 | ## About 8 | 9 | Runs a callback effect atmost one time when a condition becomes true 10 | 11 | [//]: # "Main" 12 | 13 | ## Examples 14 | 15 | ```jsx 16 | import { useState } from "react"; 17 | import { useEffectOnceWhen } from "rooks"; 18 | 19 | const App = () => { 20 | const [loading, setLoading] = useState(true); 21 | 22 | useEffectOnceWhen(() => { 23 | setTimeout(() => { 24 | setLoading(false); 25 | }, 3000); // Countdown for 3 sec 26 | }, loading); 27 | 28 | return ( 29 |
30 |
32 | 33 |
39 | );
40 | };
41 |
42 | export default App;
43 | ```
44 |
45 | ### Arguments
46 |
47 | | Arguments | Type | Description | Default value |
48 | | --------- | -------- | ------------------------------------ | ------------- |
49 | | callback | function | The callback to be called | undefined |
50 | | when | boolean | The condition which needs to be true | true |
51 |
52 | ### Return
53 |
54 | No return value.
55 |
--------------------------------------------------------------------------------
/data/docs/useFileDropRef.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useFileDropRef
3 | title: useFileDropRef
4 | sidebar_label: useFileDropRef
5 | ---
6 |
7 | ## About
8 |
9 | Drop files easily
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import { useFileDropRef } from "rooks";
15 | export default function App() {
16 | useFileDropRef();
17 | return null;
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/data/docs/useFocus.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useFocus
3 | title: useFocus
4 | sidebar_label: useFocus
5 | ---
6 |
7 | ## About
8 |
9 | Handles focus events for the immediate target element.
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import { useFocus } from "rooks";
15 | export default function App() {
16 | const [isFocus, setIsFocus] = useStateRooks: useEffectOnceWhen Example
31 |32 | 33 |
34 | {loading 35 | ? "Loading Component (will be gone in 3 secs)...." 36 | : "Counter Component"} 37 |
38 |
43 |
46 |
49 |
50 | );
51 | };
52 | export default Page;
53 | ```
54 |
--------------------------------------------------------------------------------
/data/docs/useFreshCallback.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useFreshCallback
3 | title: useFreshCallback
4 | sidebar_label: useFreshCallback
5 | ---
6 |
7 | ## About
8 |
9 | Avoid stale closures and keep your callback fresh
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import {useFreshCallback} from "rooks"
15 | export default function App() {
16 | useFreshCallback();
17 | return null
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/data/docs/useFreshTick.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useFreshTick
3 | title: useFreshTick
4 | sidebar_label: useFreshTick
5 | ---
6 |
7 | ## About
8 |
9 | Like useFreshRef but specifically for functions
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ```jsx
16 | import { useFreshTick } from "rooks";
17 | import { useEffect, useState } from "react";
18 |
19 | /* eslint-disable */
20 |
21 | export default function App() {
22 | const [currentValue, setCurrentValue] = useState(0);
23 |
24 | function Increment() {
25 | setCurrentValue(currentValue + 1);
26 | }
27 |
28 | const freshTick = useFreshTick(Increment);
29 |
30 | useEffect(() => {
31 | const intervalId = setInterval(() => {
32 | freshTick();
33 | }, 1000);
34 | return () => clearInterval(intervalId);
35 | }, []);
36 | return (
37 |
38 |
43 | );
44 | }
45 | ```
46 |
47 | ### Arguments
48 |
49 | | Argument value | Type | Description |
50 | | -------------- | -------- | ------------------------------------------------------ |
51 | | callback | function | The function call which needs to be fresh at all times |
52 |
53 | ### Returns
54 |
55 | | Return value | Type | Description | Default value |
56 | | ------------ | -------- | -------------------------- | ------------- |
57 | | ref | function | A function with fresh args | undefined |
58 |
--------------------------------------------------------------------------------
/data/docs/useGetIsMounted.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useGetIsMounted
3 | title: useGetIsMounted
4 | sidebar_label: useGetIsMounted
5 | ---
6 |
7 | ## About
8 |
9 | Checks if a component is mounted or not at the time. Useful for async effects
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ### Basic usage
16 |
17 | ```jsx
18 | import { useEffect } from "react";
19 | import { useGetIsMounted } from "rooks";
20 | export default function App() {
21 | const getIsMounted = useGetIsMounted();
22 | useEffect(() => {
23 | alert("Mounted " + String(getIsMounted()));
24 | }, []);
25 | return null;
26 | }
27 | ```
28 |
--------------------------------------------------------------------------------
/data/docs/useIsDroppingFiles.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useIsDroppingFiles
3 | title: useIsDroppingFiles
4 | sidebar_label: useIsDroppingFiles
5 | ---
6 |
7 | ## About
8 |
9 | Check if any files are currently being dropped anywhere. Useful for highlighting drop areas.
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import { useIsDroppingFiles } from "rooks";
15 | export default function App() {
16 | useIsDroppingFiles();
17 | return null;
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/data/docs/useIsomorphicEffect.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useIsomorphicEffect
3 | title: useIsomorphicEffect
4 | sidebar_label: useIsomorphicEffect
5 | ---
6 |
7 | ## About
8 |
9 | A hook that resolves to useEffect on the server and useLayoutEffect on the client.
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ```jsx
16 | import "./styles.css";
17 | import { useState } from "react";
18 | import { useIsomorphicEffect } from "rooks";
19 |
20 | function Component() {
21 | useIsomorphicEffect(() => {
22 | console.log("Rendered");
23 | }, []);
24 | return null;
25 | }
26 |
27 | const App = () => {
28 | const [shouldRender, enableRender] = useState(true);
29 | return (
30 | Rooks : useFreshTick example
39 |40 | current value : {currentValue} 41 |
42 |
31 |
33 | 34 |
47 | );
48 | };
49 |
50 | export default App;
51 | ```
52 |
53 | ### Arguments
54 |
55 | | Argument value | Type | Description |
56 | | -------------- | -------- | --------------------------------------- |
57 | | callback | function | Callback function to be called on mount |
58 |
59 | ### Returns
60 |
61 | Returns `useEffect` when "window" is not in scope and `useLayoutEffect` in the browser
62 |
--------------------------------------------------------------------------------
/data/docs/useKeyBindings.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useKeyBindings
3 | title: useKeyBindings
4 | sidebar_label: useKeyBindings
5 | ---
6 |
7 | ## About
8 |
9 | useKeyBindings can bind pairs of keyboard events and handlers.
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ```jsx
16 | import "./styles.css";
17 | import { useKeyBindings, useCounter } from "rooks";
18 |
19 | export default function App() {
20 | const { value, increment, incrementBy, decrementBy, reset } = useCounter(0);
21 | const cb1 = () => increment();
22 | const cb2 = () => decrementBy(3);
23 | const cb3 = () => incrementBy(5);
24 | const cb4 = () => reset();
25 |
26 | useKeyBindings({ a: cb1, b: cb2, Enter: cb3, Escape: cb4 });
27 |
28 | return (
29 | Rook: useIsomorphicEffect Example
32 |33 | 34 |
41 |
42 | 43 |
46 | 42 | 43 |
Explore console
44 | {shouldRender &&
30 |
34 | );
35 | }
36 | ```
37 |
38 | ### Arguments
39 |
40 | | Argument | Type | Description | Default value |
41 | | ----------- | ------- | ------------------------------------- | ------------- |
42 | | keyBindings | Object | pairs of keyboard events and handlers | {} |
43 | | options | Options | refer to useKey | {} |
44 |
--------------------------------------------------------------------------------
/data/docs/useLifecycleLogger.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useLifecycleLogger
3 | title: useLifecycleLogger
4 | sidebar_label: useLifecycleLogger
5 | ---
6 |
7 | ## About
8 |
9 | A react hook that console logs parameters as component transitions through lifecycles.
10 |
11 | [//]: # "Main"
12 |
13 | ## Installation
14 |
15 | ## Examples
16 |
17 | ```jsx
18 | import "./styles.css";
19 | import { useLifecycleLogger } from "rooks";
20 | import { useEffect, useState } from "react";
21 |
22 | export default function App() {
23 | const [value, setValue] = useState(0);
24 |
25 | useEffect(() => {
26 | setValue(1);
27 | }, []);
28 |
29 | useLifecycleLogger("Demo", value);
30 |
31 | return (
32 | 31 | Counter value is : {value} 32 |
33 |
33 |
36 | );
37 | }
38 | ```
39 |
40 | ### Arguments
41 |
42 | | Argument value | Type | Description | Defualt |
43 | | -------------- | ------ | -------------------------------------------------------- | ----------- |
44 | | componentName | String | The name of component to be shown in the log | "Component" |
45 | | rest | Array | An arry of variables to be logged in component lifecycle | undefined |
46 |
47 | ### Returns
48 |
49 | No return value
50 |
--------------------------------------------------------------------------------
/data/docs/useLockBodyScroll.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useLockBodyScroll
3 | title: useLockBodyScroll
4 | sidebar_label: useLockBodyScroll
5 | ---
6 |
7 | ## About
8 |
9 | Locks or unlocks body scroll
10 |
11 | ## Examples
12 |
13 | ### Basic
14 |
15 | ```tsx
16 | import { useState } from "react";
17 | import { useLockBodyScroll } from "rooks";
18 |
19 | export default function App() {
20 | const [isLocked, setIsLocked] = useState(false);
21 |
22 | // Lock body scroll when isLocked is true
23 | useLockBodyScroll(isLocked);
24 |
25 | return (
26 | useLifecycleLogger example
34 |See console for logs
35 |
27 |
30 |
31 | );
32 | }
33 | ```
34 |
35 | ## Arguments
36 |
37 | | Argument | Type | Description |
38 | | -------- | ------- | ------------------------------------------------ |
39 | | isLocked | boolean | Whether to lock or unlock scroll on the body tag |
40 |
41 | ---
42 |
--------------------------------------------------------------------------------
/data/docs/useMergeRefs.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useMergeRefs
3 | title: useMergeRefs
4 | sidebar_label: useMergeRefs
5 | ---
6 |
7 | ## About
8 |
9 | Merges any number of refs into a single ref
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ```jsx
16 | import "./styles.css";
17 | import { useMergeRefs, useEventListenerRef } from "rooks";
18 |
19 | function App() {
20 | const mousedownRef = useEventListenerRef("mousedown", () => {
21 | console.log("mouse down");
22 | });
23 | const mouseupRef = useEventListenerRef("mouseup", () => {
24 | console.log("mouse up");
25 | });
26 | const refs = useMergeRefs(mousedownRef, mouseupRef);
27 |
28 | return (
29 |
30 |
32 |
43 | );
44 | }
45 | export default App;
46 | ```
47 |
48 | ### Arguments
49 |
50 | | Argument value | Type | Description |
51 | | -------------- | ----- | -------------------------------------------------------------------- |
52 | | refs | Array | Takes any number of refs. Refs can be mutable refs or function refs. |
53 |
54 | ### Returns
55 |
56 | | Return value | Type | Description |
57 | | ------------ | ----------- | ----------- |
58 | | ref | CallbackRef | Merged ref |
59 |
--------------------------------------------------------------------------------
/data/docs/useMouse.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useMouse
3 | title: useMouse
4 | sidebar_label: useMouse
5 | ---
6 |
7 | ## About
8 |
9 | ### Description
10 |
11 | Mouse position hook for React.
12 | Rooks : useMergeRefs Example
31 |32 |
40 | A div with multiple refs. Click me!!
41 |
42 | 13 | 14 | ### Return value 15 | 16 | useMouse returns a single object containing the mouse position. 17 | 18 | | Returned object attributes | Type | Description | 19 | | -------------------------- | ---- | ------------------- | 20 | | x | int | X position of mouse | 21 | | y | int | Y position of mouse | 22 | 23 |
24 | ## Examples 25 | ### Basic Usage 26 | 27 | ```jsx 28 | import { useMouse } from "rooks"; 29 | 30 | export default function App() { 31 | const { x, y } = useMouse(); 32 | return ( 33 | <> 34 |
Move mouse here to see changes to position
35 |X position is {x || "null"}
36 |X position is {y || "null"}
37 | 38 | ); 39 | } 40 | ``` 41 | 42 |43 | -------------------------------------------------------------------------------- /data/docs/useMouseMoveDelta.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useMouseMoveDelta 3 | title: useMouseMoveDelta 4 | sidebar_label: useMouseMoveDelta 5 | --- 6 | 7 | ## About 8 | 9 | Tracks delta of mouse move 10 | 11 | ## Examples 12 | 13 | ```tsx 14 | import {useMouseMoveDelta} from "rooks" 15 | export default function App() { 16 | useMouseMoveDelta(); 17 | return null 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /data/docs/useMouseWheelDelta.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useMouseWheelDelta 3 | title: useMouseWheelDelta 4 | sidebar_label: useMouseWheelDelta 5 | --- 6 | 7 | ## About 8 | 9 | Tracks delta of mouse move 10 | 11 | ## Examples 12 | 13 | ```tsx 14 | import {useMouseWheelDelta} from "rooks" 15 | export default function App() { 16 | useMouseWheelDelta(); 17 | return null 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /data/docs/useNativeMapState.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useNativeMapState 3 | title: useNativeMapState 4 | sidebar_label: useNativeMapState 5 | --- 6 | 7 | ## About 8 | 9 | Manage Map() object state in React 10 | 11 | ## Examples 12 | 13 | ```tsx 14 | import { useNativeMapState } from "rooks"; 15 | export default function App() { 16 | useNativeMapState(); 17 | return null; 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /data/docs/useNavigatorLanguage.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useNavigatorLanguage 3 | title: useNavigatorLanguage 4 | sidebar_label: useNavigatorLanguage 5 | --- 6 | 7 | ## About 8 | 9 | Navigator Language hook for React. 10 | 11 | ## Examples 12 | 13 | ```jsx 14 | import "./styles.css"; 15 | import { useNavigatorLanguage } from "rooks"; 16 | 17 | function App() { 18 | const language = useNavigatorLanguage(); 19 | 20 | return ( 21 |
24 |
29 | );
30 | }
31 |
32 | export default App;
33 | ```
34 |
35 | ### Return value
36 |
37 | A language (String) is returned.
38 |
--------------------------------------------------------------------------------
/data/docs/useOnClickRef.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useOnClickRef
3 | title: useOnClickRef
4 | sidebar_label: useOnClickRef
5 | ---
6 |
7 | ## About
8 |
9 | Callback on click/tap events
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import { useOnClickRef } from "rooks";
15 | export default function App() {
16 | useOnClickRef();
17 | return null;
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/data/docs/useOnHoverRef.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useOnHoverRef
3 | title: useOnHoverRef
4 | sidebar_label: useOnHoverRef
5 | ---
6 |
7 | ## About
8 |
9 | On hover callback hook
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import {useOnHoverRef} from "rooks"
15 | export default function App() {
16 | useOnHoverRef();
17 | return null
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/data/docs/useOnWindowResize.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useOnWindowResize
3 | title: useOnWindowResize
4 | sidebar_label: useOnWindowResize
5 | ---
6 |
7 | ## About
8 |
9 | A React hook for adding an event listener for window resize
10 |
11 | ## Examples
12 |
13 | ```jsx
14 | import "./styles.css";
15 | import { useOnWindowResize } from "rooks";
16 |
17 | export default function App() {
18 | useOnWindowResize(() => console.log("window resized"));
19 |
20 | return (
21 | Rooks : useNavigatorLanguage example
25 |26 | Language is {language} 27 |
28 |
22 |
25 | );
26 | }
27 | ```
28 |
29 | ### Arguments
30 |
31 | | Arguments | Type | Description | Default value |
32 | | -------------- | -------- | ----------------------------------------------- | ------------- |
33 | | callback | function | Callback function which needs to run on unmount | undefined |
34 | | when | boolean | When the event handler should be active | true |
35 | | isLayoutEffect | boolean | Should it use layout effect. | false |
36 |
37 | ### Returns
38 |
39 | No return value.
40 |
--------------------------------------------------------------------------------
/data/docs/useOnline.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useOnline
3 | title: useOnline
4 | sidebar_label: useOnline
5 | ---
6 |
7 | ## About
8 |
9 | Online status hook for React.
10 |
11 | ### Examples
12 |
13 | ```jsx
14 | import "./styles.css";
15 | import { useOnline } from "rooks";
16 |
17 | function App() {
18 | const online = useOnline();
19 | console.log("I'm online");
20 |
21 | return (
22 | useOnWindowResize example
23 |Resize the window and see the logs
24 |
23 |
26 |
30 | );
31 | }
32 |
33 | export default App;
34 | ```
35 |
36 | ### Return value
37 |
38 | Offline status (boolean) is returned.
39 |
--------------------------------------------------------------------------------
/data/docs/useOrientation.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useOrientation
3 | title: useOrientation
4 | sidebar_label: useOrientation
5 | ---
6 |
7 | ## About
8 |
9 | orientation hook for react
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import {useOrientation} from "rooks"
15 | export default function App() {
16 | useOrientation();
17 | return null
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/data/docs/usePromise.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: usePromise
3 | title: usePromise
4 | sidebar_label: usePromise
5 | ---
6 |
7 | ## About
8 |
9 | Promise management hook for react
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import {usePromise} from "rooks"
15 | export default function App() {
16 | usePromise();
17 | return null
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/data/docs/useRenderCount.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useRenderCount
3 | title: useRenderCount
4 | sidebar_label: useRenderCount
5 | ---
6 |
7 | ## About
8 |
9 | Get the render count of a component
10 |
11 | ## Examples
12 |
13 | TODO: Add an example here.
14 |
--------------------------------------------------------------------------------
/data/docs/useSafeSetState.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useSafeSetState
3 | title: useSafeSetState
4 | sidebar_label: useSafeSetState
5 | ---
6 |
7 | ## About
8 |
9 | set state but ignores if component has already unmounted
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import {useSafeSetState} from "rooks"
15 | export default function App() {
16 | useSafeSetState();
17 | return null
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/data/docs/useSessionstorageState.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useSessionstorageState
3 | title: useSessionstorageState
4 | sidebar_label: useSessionstorageState
5 | ---
6 |
7 | ## About
8 |
9 | useState but syncs with sessionstorage
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ```jsx
16 | import "./styles.css";
17 | import React from "react";
18 | import { useSessionstorageState } from "rooks";
19 |
20 | export default function App() {
21 | const [count, setCount] = useSessionstorageState("my-app:count", 0);
22 |
23 | return (
24 | Rooks: useOnline example
24 | 25 |26 |
27 | Status:You are {online ? "Online" : "Offline"}
28 |
29 |
25 |
30 | );
31 | }
32 | ```
33 |
--------------------------------------------------------------------------------
/data/docs/useSetState.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useSetState
3 | title: useSetState
4 | sidebar_label: useSetState
5 | ---
6 |
7 | ## About
8 |
9 | Manage the state of a Set in React. Exposes add, delete and clear methods along with the current set to easily manipulate values in a set.
10 |
11 | ## Examples
12 |
13 | ```jsx
14 | import { useSetState } from "rooks";
15 | export default function App() {
16 | useSetState();
17 | return null;
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/data/docs/useSpeech.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useSpeech
3 | title: useSpeech
4 | sidebar_label: useSpeech
5 | ---
6 |
7 | ## About
8 |
9 | Speech synthesis hook for React
10 |
11 | ## Examples
12 |
13 | ```tsx
14 | import {useSpeech} from "rooks"
15 | export default function App() {
16 | useSpeech();
17 | return null
18 | }
19 | ```
20 |
--------------------------------------------------------------------------------
/data/docs/useTimeTravelState.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useTimeTravelState
3 | title: useTimeTravelState
4 | sidebar_label: useTimeTravelState
5 | ---
6 |
7 | ## About
8 |
9 | A hook that manages state which can undo and redo. A more powerful version of useUndoState hook.
10 |
11 | ## Examples
12 |
13 | ### Basic example
14 |
15 | ```tsx
16 | import { useTimeTravelState } from "rooks";
17 | export default function App() {
18 | const [value, setValue, controls] = useTimeTravelState(0);
19 |
20 | return (
21 | Rooks : useSessionstorageState
26 |Refresh the page to see the previous value in tact
27 | 28 | 29 |
22 | Current value: {value}
23 |
24 |
29 | 30 | 31 | 32 |
33 | );
34 | }
35 | ```
36 |
--------------------------------------------------------------------------------
/data/docs/useTimeoutWhen.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useTimeoutWhen
3 | title: useTimeoutWhen
4 | sidebar_label: useTimeoutWhen
5 | ---
6 |
7 | ## About
8 |
9 | Takes a callback and fires it when a condition is true
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ### Basic usage
16 |
17 | ```jsx
18 | import "./styles.css";
19 | import { useTimeoutWhen } from "rooks";
20 | import { useState } from "react";
21 |
22 | function App() {
23 | const [start, setStart] = useState(false);
24 | useTimeoutWhen(() => setStart(false), 2000, start);
25 | return (
26 | <>
27 | 24 |
25 | Can undo: {String(controls.canUndo)} 26 | Can redo: {String(controls.canRedo)} 27 |
28 |29 | 30 | 31 | 32 |
Rooks: useTimeoutWhen example
28 |29 |
Click the button below to disable it for 2 seconds
30 | 33 | 34 | ); 35 | } 36 | 37 | export default App; 38 | ``` 39 | 40 | ### Arguments 41 | 42 | | Arguments | Type | Description | Default value | 43 | | --------- | -------- | -------------------------------------------------------- | ------------- | 44 | | callback | function | Function to be executed in timeout | undefind | 45 | | delay | Number | Number in milliseconds after which callback is to be run | 0 | 46 | | when | boolean | The condition which when true, sets the timeout | true | 47 | 48 | ### Returned 49 | 50 | No return value. 51 | -------------------------------------------------------------------------------- /data/docs/useUndoRedoState.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useUndoRedoState 3 | title: useUndoRedoState 4 | sidebar_label: useUndoRedoState 5 | --- 6 | 7 | ## About 8 | 9 | Setstate but can also undo and redo 10 | 11 | ## Examples 12 | 13 | ```tsx 14 | import {useUndoRedoState} from "rooks" 15 | export default function App() { 16 | useUndoRedoState(); 17 | return null 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /data/docs/useVibrate.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useVibrate 3 | title: useVibrate 4 | sidebar_label: useVibrate 5 | --- 6 | 7 | ## About 8 | 9 | Vibration API hook for React 10 | 11 | ## Examples 12 | 13 | ```tsx 14 | import {useVibrate} from "rooks" 15 | export default function App() { 16 | useVibrate(); 17 | return null 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /data/docs/useVideo.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useVideo 3 | title: useVideo 4 | sidebar_label: useVideo 5 | --- 6 | 7 | ## About 8 | 9 | Video hook for react 10 | 11 | ## Examples 12 | 13 | ```tsx 14 | import {useVideo} from "rooks" 15 | export default function App() { 16 | useVideo(); 17 | return null 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /data/docs/useWhyDidYouUpdate.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useWhyDidYouUpdate 3 | title: useWhyDidYouUpdate 4 | sidebar_label: useWhyDidYouUpdate 5 | --- 6 | 7 | ## About 8 | 9 | A hook that can track which value change caused a rerender 10 | 11 | ## Examples 12 | 13 | ```tsx 14 | import {useWhyDidYouUpdate} from "rooks" 15 | export default function App() { 16 | useWhyDidYouUpdate(); 17 | return null 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /data/docs/useWillUnmount.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useWillUnmount 3 | title: useWillUnmount 4 | sidebar_label: useWillUnmount 5 | --- 6 | 7 | ### About 8 | 9 | A React hook for componentWillUnmount lifecycle method. 10 | 11 | ### Examples 12 | 13 | ```jsx 14 | import "./styles.css"; 15 | import { useState } from "react"; 16 | import { useWillUnmount } from "rooks"; 17 | 18 | function Message() { 19 | useWillUnmount(function(props) { 20 | console.log("UNMOUNT", props); 21 | }); 22 | returnThis component will unmount
; 23 | } 24 | 25 | const App = () => { 26 | const [shouldRender, enableRender] = useState(true); 27 | return ( 28 |
29 |
31 | 32 |
46 | );
47 | };
48 |
49 | export default App;
50 | ```
51 |
52 | #### Arguments
53 |
54 | | Arguments | Type | Description | Default value |
55 | | --------- | -------- | ----------------------------------------------- | ------------- |
56 | | callback | function | Callback function which needs to run on unmount | undefined |
57 |
--------------------------------------------------------------------------------
/data/docs/useWindowEventListener.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useWindowEventListener
3 | title: useWindowEventListener
4 | sidebar_label: useWindowEventListener
5 | ---
6 |
7 | ## About
8 |
9 | Adds an event listener to window
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ### Basic usage
16 |
17 | ```jsx
18 | import { useState } from "react";
19 | import { useWindowEventListener } from "rooks";
20 | import "./styles.css";
21 |
22 | export default function App() {
23 | const [value, setValue] = useState(0);
24 | useWindowEventListener("click", function() {
25 | setValue(value + 1);
26 | });
27 | return (
28 | Rook: useWillUnmount Example
30 |31 | 32 |
39 |
40 |
45 | 40 |
Check or Uncheck the box
41 | enableRender(!shouldRender)} type="checkBox" /> 42 | 43 | {shouldRender &&
34 |
37 | );
38 | }
39 | ```
40 |
41 | ---
42 |
--------------------------------------------------------------------------------
/data/docs/useWindowScrollPosition.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useWindowScrollPosition
3 | title: useWindowScrollPosition
4 | sidebar_label: useWindowScrollPosition
5 | ---
6 |
7 | ## About
8 |
9 | A React hook to get the scroll position of the window
10 |
11 | [//]: # "Main"
12 |
13 | ## Examples
14 |
15 | ### Basic Usage
16 |
17 | ```jsx
18 | import "./styles.css";
19 | import { useWindowScrollPosition } from "rooks";
20 |
21 | function App() {
22 | const position = useWindowScrollPosition(); // default config: { wait = 100, passive = true }
23 | console.log(position); // {x: ..., y: ...}
24 | return (
25 | Click anywhere
35 |Value is {value}
36 |
26 |
28 | 29 |
32 | );
33 | }
34 |
35 | export default App;
36 | ```
37 |
--------------------------------------------------------------------------------
/i18n/en.json:
--------------------------------------------------------------------------------
1 | {
2 | "_comment": "This file is auto-generated by write-translations.js",
3 | "localized-strings": {
4 | "next": "Next",
5 | "previous": "Previous",
6 | "tagline": "Commonly used hooks for everyone",
7 | "docs": {},
8 | "links": {},
9 | "categories": {
10 | "Guides": "Guides",
11 | "General": "General"
12 | }
13 | },
14 | "pages-strings": {
15 | "Help Translate|recruit community translators for your project": "Help Translate",
16 | "Edit this Doc|recruitment message asking to edit the doc source": "Edit",
17 | "Translate this Doc|recruitment message asking to translate the docs": "Translate"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/packages/eslint-config/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @repo/eslint-config
2 |
3 | ## 0.1.0
4 |
5 | ### Minor Changes
6 |
7 | - [#1774](https://github.com/imbhargav5/rooks/pull/1774) [`3714495`](https://github.com/imbhargav5/rooks/commit/37144959801a8c71ca9757b01656190c1ffe1218) Thanks [@imbhargav5](https://github.com/imbhargav5)! - upgrade to react 19
8 |
--------------------------------------------------------------------------------
/packages/eslint-config/README.md:
--------------------------------------------------------------------------------
1 | # `@turbo/eslint-config`
2 |
3 | Collection of internal eslint configurations.
4 |
--------------------------------------------------------------------------------
/packages/eslint-config/base.js:
--------------------------------------------------------------------------------
1 | import js from "@eslint/js";
2 | import eslintConfigPrettier from "eslint-config-prettier";
3 | import turboPlugin from "eslint-plugin-turbo";
4 | import tseslint from "typescript-eslint";
5 | import onlyWarn from "eslint-plugin-only-warn";
6 |
7 | /**
8 | * A shared ESLint configuration for the repository.
9 | *
10 | * @type {import("eslint").Linter.Config}
11 | * */
12 | export const config = [
13 | js.configs.recommended,
14 | eslintConfigPrettier,
15 | ...tseslint.configs.recommended,
16 | {
17 | plugins: {
18 | turbo: turboPlugin,
19 | },
20 | rules: {
21 | "turbo/no-undeclared-env-vars": "warn",
22 | },
23 | },
24 | {
25 | plugins: {
26 | onlyWarn,
27 | },
28 | },
29 | {
30 | ignores: ["dist/**"],
31 | },
32 | ];
33 |
--------------------------------------------------------------------------------
/packages/eslint-config/next.js:
--------------------------------------------------------------------------------
1 | import js from "@eslint/js";
2 | import eslintConfigPrettier from "eslint-config-prettier";
3 | import tseslint from "typescript-eslint";
4 | import pluginReactHooks from "eslint-plugin-react-hooks";
5 | import pluginReact from "eslint-plugin-react";
6 | import globals from "globals";
7 | import pluginNext from "@next/eslint-plugin-next";
8 | import { config as baseConfig } from "./base.js";
9 |
10 | /**
11 | * A custom ESLint configuration for libraries that use Next.js.
12 | *
13 | * @type {import("eslint").Linter.Config}
14 | * */
15 | export const nextJsConfig = [
16 | ...baseConfig,
17 | js.configs.recommended,
18 | eslintConfigPrettier,
19 | ...tseslint.configs.recommended,
20 | {
21 | ...pluginReact.configs.flat.recommended,
22 | languageOptions: {
23 | ...pluginReact.configs.flat.recommended.languageOptions,
24 | globals: {
25 | ...globals.serviceworker,
26 | },
27 | },
28 | },
29 | {
30 | plugins: {
31 | "@next/next": pluginNext,
32 | },
33 | rules: {
34 | ...pluginNext.configs.recommended.rules,
35 | ...pluginNext.configs["core-web-vitals"].rules,
36 | },
37 | },
38 | {
39 | plugins: {
40 | "react-hooks": pluginReactHooks,
41 | },
42 | settings: { react: { version: "detect" } },
43 | rules: {
44 | ...pluginReactHooks.configs.recommended.rules,
45 | // React scope no longer necessary with new JSX transform.
46 | "react/react-in-jsx-scope": "off",
47 | },
48 | },
49 | ];
50 |
--------------------------------------------------------------------------------
/packages/eslint-config/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@repo/eslint-config",
3 | "version": "0.1.0",
4 | "type": "module",
5 | "private": true,
6 | "exports": {
7 | "./base": "./base.js",
8 | "./next-js": "./next.js",
9 | "./react-internal": "./react-internal.js"
10 | },
11 | "devDependencies": {
12 | "@eslint/js": "^9.22.0",
13 | "@next/eslint-plugin-next": "^15.2.1",
14 | "eslint": "^9.22.0",
15 | "eslint-config-prettier": "^10.1.1",
16 | "eslint-plugin-only-warn": "^1.1.0",
17 | "eslint-plugin-react": "^7.37.4",
18 | "eslint-plugin-react-hooks": "^5.2.0",
19 | "eslint-plugin-turbo": "^2.4.4",
20 | "globals": "^16.0.0",
21 | "typescript": "^5.8.2",
22 | "typescript-eslint": "^8.26.0"
23 | }
24 | }
--------------------------------------------------------------------------------
/packages/eslint-config/react-internal.js:
--------------------------------------------------------------------------------
1 | import js from "@eslint/js";
2 | import eslintConfigPrettier from "eslint-config-prettier";
3 | import tseslint from "typescript-eslint";
4 | import pluginReactHooks from "eslint-plugin-react-hooks";
5 | import pluginReact from "eslint-plugin-react";
6 | import globals from "globals";
7 | import { config as baseConfig } from "./base.js";
8 |
9 | /**
10 | * A custom ESLint configuration for libraries that use React.
11 | *
12 | * @type {import("eslint").Linter.Config} */
13 | export const config = [
14 | ...baseConfig,
15 | js.configs.recommended,
16 | eslintConfigPrettier,
17 | ...tseslint.configs.recommended,
18 | pluginReact.configs.flat.recommended,
19 | {
20 | languageOptions: {
21 | ...pluginReact.configs.flat.recommended.languageOptions,
22 | globals: {
23 | ...globals.serviceworker,
24 | ...globals.browser,
25 | },
26 | },
27 | },
28 | {
29 | plugins: {
30 | "react-hooks": pluginReactHooks,
31 | },
32 | settings: { react: { version: "detect" } },
33 | rules: {
34 | ...pluginReactHooks.configs.recommended.rules,
35 | // React scope no longer necessary with new JSX transform.
36 | "react/react-in-jsx-scope": "off",
37 | },
38 | },
39 | ];
40 |
--------------------------------------------------------------------------------
/packages/rooks/.escheckrc:
--------------------------------------------------------------------------------
1 | {
2 | "ecmaVersion": "es2017",
3 | "module": true,
4 | "files": "./dist/esm/**/*.js"
5 | }
--------------------------------------------------------------------------------
/packages/rooks/.gitignore:
--------------------------------------------------------------------------------
1 | .vercel
2 | node_modules/
3 | /test-results/
4 | /playwright-report/
5 | /playwright/.cache/
6 | /test-results/
7 | /playwright-report/
8 | /playwright/.cache/
9 |
--------------------------------------------------------------------------------
/packages/rooks/.npmignore:
--------------------------------------------------------------------------------
1 | *
2 | !dist/**/*
3 | dist/esm/__tests__
4 | dist/cjs/__tests__
5 | dist/umd/__tests__
6 | !CHANGELOG.md
7 | !README.md
8 | !LICENSE
9 |
--------------------------------------------------------------------------------
/packages/rooks/.size-limit.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | // Regularly update this max size when new hooks are added (keep a threshold)
4 | const fullBundleMaxSize = "20KB";
5 |
6 | /**
7 | * Will ensure esm tree-shakeability and total size are within expectations.
8 | *
9 | * @link https://github.com/ai/size-limit/
10 | * @type {{name: string, path: string[], limit: string, import?: string, webpack?: boolean}[]}
11 | */
12 | module.exports = [
13 | // Size of all imports from the esm bundle
14 | {
15 | name: "ESM Webpack (*)",
16 | webpack: true,
17 | path: ["dist/esm/index.js"],
18 | import: "*",
19 | limit: fullBundleMaxSize,
20 | },
21 | // Size of an individual import from the esm bundle
22 | // We can also do this eventually if we want
23 | // {
24 | // name: "ESM Webpack ({ useDebounce })",
25 | // webpack: true,
26 | // path: ["dist/esm/index.js"],
27 | // import: "{ useDebounce }",
28 | // limit: "2KB",
29 | // },
30 | {
31 | name: "CJS Webpack (*)",
32 | path: ["dist/cjs/index.js"],
33 | webpack: true,
34 | import: "*", // CJS does not tree-shake in webpack5.
35 | limit: fullBundleMaxSize,
36 | },
37 | {
38 | name: "UMD bundle size (*)",
39 | path: ["dist/umd/rooks.umd.js"],
40 | webpack: false,
41 | limit: fullBundleMaxSize,
42 | },
43 | ];
44 |
--------------------------------------------------------------------------------
/packages/rooks/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import { config } from "@repo/eslint-config/react-internal";
2 |
3 | /** @type {import("eslint").Linter.Config} */
4 | export default config;
5 |
--------------------------------------------------------------------------------
/packages/rooks/jest.config.ts:
--------------------------------------------------------------------------------
1 | // jest.config.ts
2 | import type { JestConfigWithTsJest } from 'ts-jest';
3 | import { readFileSync } from 'fs';
4 | import { join } from 'path';
5 |
6 | // Read tsconfig.json file and parse it to get paths
7 | const tsConfigPath = join(__dirname, 'tsconfig.json');
8 | const tsConfig = JSON.parse(readFileSync(tsConfigPath, 'utf8'));
9 |
10 | const config: JestConfigWithTsJest = {
11 | preset: 'ts-jest',
12 | testEnvironment: 'jsdom',
13 | testMatch: ['Rooks : useWindowScrollPosition Example
27 |28 | 29 |
Scroll
30 |{JSON.stringify(position)}
31 |{this.state.error.message}
;
28 | }
29 |
30 | return this.props.children;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/packages/rooks/src/__tests__/useAudio.spec.tsx:
--------------------------------------------------------------------------------
1 | import { useAudio } from "@/hooks/useAudio";
2 |
3 | // write a simple test which checks if useAudio is defined
4 | describe("useAudio", () => {
5 | it("is defined", () => {
6 | expect.hasAssertions();
7 | expect(useAudio).not.toBeUndefined();
8 | });
9 | });
10 |
--------------------------------------------------------------------------------
/packages/rooks/src/__tests__/useDidMount.spec.ts:
--------------------------------------------------------------------------------
1 | import { renderHook } from "@testing-library/react-hooks";
2 | import { useState } from "react";
3 | import { useDidMount } from "@/hooks/useDidMount";
4 |
5 | describe("useDidMount", () => {
6 | it("is defined", () => {
7 | expect.hasAssertions();
8 | expect(useDidMount).toBeDefined();
9 | });
10 | describe("base", () => {
11 | let useHook = () => {
12 | return {
13 | value: 0,
14 | };
15 | };
16 |
17 | beforeEach(() => {
18 | useHook = function () {
19 | const [value, setValue] = useState(0);
20 | useDidMount(() => {
21 | setValue(9_000);
22 | });
23 |
24 | return { value };
25 | };
26 | });
27 | it("runs immediately after mount", async () => {
28 | expect.hasAssertions();
29 | const { result } = renderHook(() => useHook());
30 | expect(result.current.value).toBe(9_000);
31 | });
32 | });
33 | });
34 |
--------------------------------------------------------------------------------
/packages/rooks/src/__tests__/useDocumentVisibilityState.spec.ts:
--------------------------------------------------------------------------------
1 | import { useDocumentVisibilityState } from "@/hooks/useDocumentVisibilityState";
2 |
3 | describe("useDocumentVisibilityState", () => {
4 | it("should be defined", () => {
5 | expect.hasAssertions();
6 | expect(useDocumentVisibilityState).toBeDefined();
7 | });
8 | });
9 |
--------------------------------------------------------------------------------
/packages/rooks/src/__tests__/useForkRef.spec.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render, getByTestId, fireEvent } from "@testing-library/react";
3 |
4 | import TestRenderer from "react-test-renderer";
5 | import { useEventListenerRef } from "@/hooks/useEventListenerRef";
6 | import { useForkRef } from "@/hooks/useForkRef";
7 |
8 | const { act } = TestRenderer;
9 |
10 | describe("useForkRef", () => {
11 | let mockCallback = () => {};
12 | let TestJSX = () => ;
13 | beforeEach(() => {
14 | mockCallback = jest.fn(() => {});
15 | TestJSX = () => {
16 | const mouseUpRef = useEventListenerRef("mouseup", mockCallback);
17 | const mouseDownRef = useEventListenerRef("mousedown", mockCallback);
18 | const ref = useForkRef(mouseUpRef, mouseDownRef);
19 |
20 | return (
21 |
22 | Click me
23 |
24 | );
25 | };
26 | });
27 |
28 | it("should be defined", () => {
29 | expect.hasAssertions();
30 | expect(useForkRef).toBeDefined();
31 | });
32 |
33 | it("should be called on mouse events", () => {
34 | expect.hasAssertions();
35 | const { container } = render(
14 |
17 |
18 | );
19 | }
20 |
21 | describe("useLockBodyScroll", () => {
22 | test("lock and unlock body scroll", () => {
23 | expect.hasAssertions();
24 | render(