116 |
117 | );
118 | }
119 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/config.ts:
--------------------------------------------------------------------------------
1 | import { defineCollection, z, reference } from 'astro:content';
2 |
3 | export const collections = {
4 | hooks: defineCollection({
5 | schema: z.object({
6 | experimental: z.boolean().optional(),
7 | draft: z.boolean().default(false),
8 | sandboxId: z.string().optional(),
9 | previewHeight: z.string().optional(),
10 | name: z.string(),
11 | tagline: z.string(),
12 | ogImage: z.string().optional(),
13 | rank: z.number(),
14 | relatedHooks: z.array(
15 | reference('hooks').optional()
16 | ).optional(),
17 | }),
18 | }),
19 | };
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useBattery.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useBattery
3 | rank: 32
4 | tagline: Track the battery status of a user’s device with useBattery.
5 | sandboxId: usebattery-o8js1p
6 | previewHeight: 320px
7 | relatedHooks:
8 | - usenetworkstate
9 | - usepreferredlanguage
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useBattery hook is useful for accessing and monitoring the battery status
18 | of the user’s device in a React application. By using this hook, you can
19 | easily retrieve information such as the battery level, charging status, and
20 | estimated charging and discharging times. It provides a state object that
21 | includes properties like supported, loading, level, charging, chargingTime,
22 | and dischargingTime.
23 |
24 |
25 |
26 | ### Return Values
27 | The hook returns an object containing the following properties:
28 |
29 |
30 | | Name | Type | Description |
31 | | ---------------- | ------- | ----------- |
32 | | supported | boolean | Indicates whether the Battery Status API is supported in the user’s browser. |
33 | | loading | boolean | Indicates if the battery information is still loading. |
34 | | level | number | Represents the level of the system’s battery. 0.0 means that the system’s battery is completely discharged, and 1.0 means the battery is completely charged. |
35 | | charging | boolean | Represents whether the system’s battery is charging. `true` means the battery is charging, `false` means it’s not. |
36 | | chargingTime | number | Represents the time remaining in seconds until the system’s battery is fully charged. |
37 | | dischargingTime | number | Represents the time remaining in seconds until the system’s battery is completely discharged and the system is about to be suspended. |
38 |
70 |
71 | );
72 | }
73 | ```
74 |
75 |
76 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useClickAway.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useClickAway
3 | rank: 47
4 | tagline: Detect clicks outside of specific component with useClickAway.
5 | sandboxId: useclickaway-p4hl4m
6 | previewHeight: 250px
7 | relatedHooks:
8 | - uselongpress
9 | - usehover
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useClickAway hook is a useful for detecting clicks outside a specific
18 | component. It allows you to pass a callback function that will be triggered
19 | whenever a click occurs outside the component’s area. This hook is
20 | particularly helpful when implementing dropdown menus, modals, or any other UI
21 | elements that need to be closed when the user clicks outside of them. By
22 | attaching event listeners to the document, the hook checks if the click target
23 | is within the component’s reference, and if not, it invokes the provided
24 | callback function.
25 |
26 |
27 |
28 | ### Parameters
29 |
30 |
31 | | Name | Type | Description |
32 | | ---- | -------- | ----------- |
33 | | callback | function | The callback function that is provided as an argument to `useClickAway`. This function is invoked whenever a click event is detected outside of the referenced element. The event object from the click is passed to this callback function. |
34 |
35 |
36 | ### Return Values
37 |
38 |
39 | | Name | Type | Description |
40 | | ---- | ------------ | ----------- |
41 | | ref | React ref | This is a ref object returned by the hook. It should be attached to a React element to monitor click events. The ref provides a way to access the properties of the element it is attached to. |
42 |
74 |
77 |
78 | {isOpen && (
79 |
87 | )}
88 |
89 | );
90 | }
91 | ```
92 |
93 |
94 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useContinuousRetry.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useContinuousRetry
3 | experimental: true
4 | rank: 12
5 | tagline: Automates retries of a callback function until it succeeds with useContinuousRetry
6 | sandboxId: usecontinuousretry-v0uf1n
7 | previewHeight: 380px
8 | relatedHooks:
9 | - usesessionstorage
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useContinuousRetry hook allows you to repeatedly call a specified callback
18 | function at a defined interval until the callback returns a truthy value,
19 | indicating a successful resolution. This hook is particularly handy when
20 | dealing with asynchronous operations or API calls that may fail temporarily
21 | and need to be retried automatically. It encapsulates the logic of retrying
22 | and provides a clean interface to handle retry-related states, such as whether
23 | the retry process has resolved or not.
24 |
25 |
26 |
27 | ### Parameters
28 |
29 |
30 | | Name | Type | Description |
31 | | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------|
32 | | callback | function | The callback function to be executed repeatedly until it returns a truthy value. |
33 | | interval | number | (Optional) The interval in milliseconds at which the callback function is executed. Default value is 100 milliseconds. |
34 | | options | object | (Optional) An object containing a `maxRetries` property which tells `useContinuousRetry` the maximum amount of retry attempts it should make before stopping |
35 |
36 |
37 | ### Return Value
38 |
39 |
40 | | Type | Description |
41 | | ------- | ------------------------------------------------------------------------------------------ |
42 | | boolean | `true` if the callback function has resolved (returned a truthy value), `false` otherwise. |
43 |
71 |
72 | );
73 | }
74 | ```
75 |
76 |
77 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useCopyToClipboard.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useCopyToClipboard
3 | rank: 31
4 | tagline: Copy text to the clipboard using useCopyToClipboard.
5 | sandboxId: usecopytoclipboard-y22r6w
6 | previewHeight: 300px
7 | relatedHooks:
8 | - usemap
9 | - usequeue
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useCopyToClipboard hook is useful because it abstracts the complexity of
18 | copying text to the clipboard in a cross-browser compatible manner. It
19 | utilizes the modern navigator.clipboard.writeText method if available, which
20 | provides a more efficient and secure way to copy text. In case the writeText
21 | method is not supported by the browser, it falls back to a traditional method
22 | using the document.execCommand("copy") approach.
23 |
24 |
25 |
26 | ### Return Value
27 |
28 | The `useCopyToClipboard` hook returns an array with the following elements:
29 |
30 |
31 | | Index | Type | Description |
32 | | ----- | -------- | ------------------------------------------------------ |
33 | | 0 | string | The value that was last copied to the clipboard. |
34 | | 1 | function | A function to copy a specified value to the clipboard. |
35 |
70 |
71 | {hasCopiedText && (
72 |
81 | )}
82 |
83 | );
84 | }
85 | ```
86 |
87 |
88 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useCountdown.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useCountdown
3 | experimental: true
4 | rank: 21
5 | tagline: Create countdown timers using useCountdown.
6 | sandboxId: usecountdown-6gzbhg
7 | previewHeight: 340px
8 | relatedHooks:
9 | - useinterval
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useCountdown hook is useful for creating a countdown timer. By specifying
18 | an endTime and various options such as the interval between ticks and callback
19 | functions for each tick and completion, the hook sets up an interval that
20 | updates the count and triggers the appropriate callbacks until the countdown
21 | reaches zero. The countdown value is returned, allowing you to easily
22 | incorporate and display the countdown in your components.
23 |
24 |
25 |
26 | ### Parameters
27 |
28 |
29 | | Name | Type | Description |
30 | | ------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
31 | | endTime | number | The end time of the countdown in milliseconds since the Unix epoch. |
32 | | options | object | An object containing the following options:
`interval`: The interval in milliseconds at which the countdown should tick.
`onComplete`: A callback function to be called when the countdown reaches zero.
`onTick`: A callback function to be called on each tick of the countdown.
|
33 |
34 |
35 | ### Return Value
36 |
37 |
38 | | Name | Type | Description |
39 | | ----- | ------ | ----------------------------------- |
40 | | count | number | The current count of the countdown. |
41 |
83 | )}
84 |
85 | );
86 | }
87 | ```
88 |
89 |
90 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useCounter.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useCounter
3 | rank: 49
4 | tagline: Manage a counter value with minimum and maximum limits with useCounter.
5 | sandboxId: usecounter-ddeo74
6 | previewHeight: 450px
7 | relatedHooks:
8 | - usecountdown
9 | - useprevious
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useCounter hook is useful for managing a counter value with additional
18 | options for minimum and maximum limits. The hook takes a starting value and
19 | options object as parameters, which can specify minimum and maximum limits for
20 | the counter. If the starting value falls outside the specified limits, an
21 | error is thrown. The hook returns the current count value and an object
22 | containing functions to increment, decrement, set a specific count, and reset
23 | the counter.
24 |
25 |
26 |
27 | ### Parameters
28 |
29 |
30 | | Name | Type | Description |
31 | | ------------- | ------ | -------------------------------------------------- |
32 | | startingValue | number | The initial value for the counter. Default is `0`. |
33 | | options | object | Additional options for the counter. |
34 | | options.min | number | The minimum value allowed for the counter. |
35 | | options.max | number | The maximum value allowed for the counter. |
36 |
37 |
38 | ### Return Value
39 |
40 | The `useCounter` hook returns an array with two elements:
41 |
42 |
43 | | Name | Parameters | Description |
44 | | --------------- | ----------------- | ---------------------------------------------------- |
45 | | `[0]` | | The current value of the counter. |
46 | | `[1].increment` | | Increments the counter by 1. |
47 | | `[1].decrement` | | Decrements the counter by 1. |
48 | | `[1].set` | nextCount: number | Sets the counter to the specified `nextCount` value. |
49 | | `[1].reset` | | Resets the counter to the initial `startingValue`. |
50 |
87 |
88 | );
89 | }
90 | ```
91 |
92 |
93 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useDebounce.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useDebounce
3 | rank: 1
4 | tagline: Delay the execution of function or state update with useDebounce.
5 | sandboxId: usedebounce-hmo7m3
6 | previewHeight: 1000px
7 | relatedHooks:
8 | - usethrottle
9 | - usefetch
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useDebounce hook is useful for delaying the execution of functions or
18 | state updates until a specified time period has passed without any further
19 | changes to the input value. This is especially useful in scenarios such as
20 | handling user input or triggering network requests, where it effectively
21 | reduces unnecessary computations and ensures that resource-intensive
22 | operations are only performed after a pause in the input activity.
23 |
24 |
25 |
26 | ### Parameters
27 |
28 |
29 | | Name | Type | Description |
30 | | ----- | ------ | ----------- |
31 | | value | any | The value that you want to debounce. This can be of any type. |
32 | | delay | number | The delay time in milliseconds. After this amount of time, the latest value is used. |
33 |
34 |
35 | ### Return Values
36 |
37 |
38 | | Name | Type | Description |
39 | | ------------- | ---- | ----------- |
40 | | debouncedValue| any | The debounced value. After the delay time has passed without the `value` changing, this will be updated to the latest `value`. |
41 |
95 |
106 |
107 |
108 |
109 | );
110 | }
111 | ```
112 |
113 |
114 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useDefault.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useDefault
3 | rank: 44
4 | tagline: Manage state with default values using useDefault.
5 | sandboxId: usedefault-5c0pyt
6 | previewHeight: 250px
7 | relatedHooks:
8 | - useprevious
9 | ---
10 |
11 | import CodePreview from "../../components/CodePreview.astro";
12 | import HookDescription from "../../components/HookDescription.astro";
13 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
14 |
15 |
16 | The `useDefault` hook behaves similar to `useState` but with one difference – if the state of the hook is `undefined` or `null`, `useDefault` will default the state to a provided default value.
17 |
18 |
19 |
20 | ### Parameters
21 |
22 |
23 | | Name | Type | Description |
24 | | ------------ | -------- | ----------- |
25 | | initialValue | any | The initial value of the state returned from `useDefault` |
26 | | defaultValue | any | The default value to be used if the state is `undefined` or `null`. |
27 |
28 |
29 | ### Return Values
30 |
31 |
32 | | Name | Type | Description |
33 | | -------- | --------------- | ----------- |
34 | | state | any | The current state. If the state is `undefined` or `null`, `defaultValue` is returned instead. |
35 | | setState | function | The state setter function returned from `React.useState()`. This can be called to update the state. |
36 |
84 |
85 | );
86 | }
87 |
88 | ```
89 |
90 |
91 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useDocumentTitle.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useDocumentTitle
3 | rank: 40
4 | tagline: Dynamically update the title of a webpage with useDocumentTitle.
5 | sandboxId: usedocumenttitle-6vmc1n
6 | previewHeight: 300px
7 | relatedHooks:
8 | - usefavicon
9 | ---
10 |
11 | import CodePreview from "../../components/CodePreview.astro";
12 | import HookDescription from "../../components/HookDescription.astro";
13 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
14 |
15 |
16 | The useDocumentTitle hook is useful for dynamically updating the title of a
17 | webpage based on the current state or data. This hook proves beneficial in
18 | scenarios where the title needs to be dynamically updated, such as displaying
19 | the name of the currently selected item or reflecting changes in application
20 | state.
21 |
22 |
23 |
24 | ### Parameters
25 |
26 |
27 | | Name | Type | Description |
28 | | ----- | ------ | ------------------------------------- |
29 | | title | string | The title to be set for the document. |
30 |
61 |
64 |
65 | );
66 | }
67 | ```
68 |
69 |
70 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useEventListener.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useEventListener
3 | experimental: true
4 | rank: 26
5 | tagline: Listen for events on a target element with useEventListener.
6 | sandboxId: useeventlistener-51h645
7 | previewHeight: 250px
8 | relatedHooks:
9 | - usescript
10 | - usehover
11 | ---
12 |
13 | import CodePreview from "../../components/CodePreview.astro";
14 | import HookDescription from "../../components/HookDescription.astro";
15 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
16 |
17 |
18 | The useEventListener hook enables you to add event listeners to a target
19 | element within a React component. By using useEventListener, you can handle
20 | various types of events, such as mouse events or keyboard events, and specify
21 | the target element, event name, event handler function, and additional
22 | options. applications.
23 |
24 |
25 |
26 | ### Parameters
27 |
28 |
29 | | Name | Type | Description |
30 | | --------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
31 | | target | ref or DOM element | The target element to attach the event listener to. It can be either a ref object (`ref.current`) or a DOM element. |
32 | | eventName | string | The name of the event to listen for. |
33 | | handler | function | The event handler function to be executed when the event is triggered. |
34 | | options | object | (Optional) Additional options for the event listener. |
35 | | options.capture | boolean | Specifies whether the event should be captured during the capturing phase. Default is `false`. |
36 | | options.passive | boolean | Specifies whether the event listener will not call `preventDefault()`. Default is `false`. |
37 | | options.once | boolean | Specifies whether the event listener should only be invoked once. Default is `false`. |
38 |
74 | {isOpen && (
75 |
83 | )}
84 |
85 | );
86 | }
87 | ```
88 |
89 |
90 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useFavicon.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useFavicon
3 | rank: 43
4 | tagline: Dynamically update the favicon with useFavicon.
5 | sandboxId: usefavicon-xckn4k
6 | previewHeight: 200px
7 | relatedHooks:
8 | - usedocumenttitle
9 | ---
10 |
11 | import CodePreview from "../../components/CodePreview.astro";
12 | import HookDescription from "../../components/HookDescription.astro";
13 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
14 |
15 |
16 | The useFavicon hook is a useful for dynamically update the favicon (shortcut icon) of a web page. By using this hook, you can easily change the favicon by providing a new URL as a parameter. It creates a new link element with the specified URL, sets its type and relationship attributes appropriately, and appends it to the `` section of the document.
17 |
18 |
19 |
20 | ### Parameters
21 |
22 |
23 | | Name | Type | Description |
24 | | ---- | ------ | -------------------------------------------------- |
25 | | url | string | The URL of the favicon to be set for the document. |
26 |
50 |
51 |
60 |
69 |
70 |
77 |
78 | );
79 | }
80 | ```
81 |
82 |
83 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useFetch.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useFetch
3 | experimental: true
4 | rank: 11
5 | tagline: Fetch data with accurate states, caching, and no stale responses using useFetch.
6 | sandboxId: usefetch-yky89o
7 | previewHeight: 670px
8 | relatedHooks:
9 | - useintersectionobserver
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useFetch React hook is useful for handling data fetching and state
18 | management in React components. It allows you to easily fetch data from a
19 | specified URL using the fetch API and provides a consistent pattern for
20 | handling loading, success, and error states. It also incorporates an internal
21 | caching mechanism to store and retrieve previously fetched data, improving
22 | performance by reducing redundant network requests. Additionally, it includes
23 | a mechanism to ignore stale responses if the component unmounts or if a new
24 | request is made before the previous one completes.
25 |
26 |
27 |
28 | ### Parameters
29 |
30 |
31 | | Name | Type | Description |
32 | | ------- | ------ | ---------------------------------------------------------------------------------------- |
33 | | url | string | The URL to fetch data from. |
34 | | options | object | (Optional) Additional options for the fetch request, such as headers or request methods. |
35 |
36 |
37 | ### Return Values
38 |
39 |
40 | | Name | Type | Description |
41 | | ----------- | ------------------ | ------------------------------------------------------------------------------ |
42 | | state | object | The state object containing the fetched data and error status. |
43 | | state.error | error \| undefined | The error object if an error occurred during the fetch, otherwise `undefined`. |
44 | | state.data | any \| undefined | The fetched data if the fetch was successful, otherwise `undefined`. |
45 |
70 |
77 |
80 |
81 |
82 | );
83 | }
84 | ```
85 |
86 |
87 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useGeolocation.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useGeolocation
3 | rank: 36
4 | tagline: Access and monitor a user's geolocation (after they give permission) with useGeolocation.
5 | sandboxId: usegeolocation-3f1d0f
6 | previewHeight: 900px
7 | relatedHooks:
8 | - usemap
9 | - useset
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useGeolocation hook is useful for accessing and monitoring the user's
18 | geolocation (after they give permission) in a React application. By utilizing
19 | the hook, developers can easily retrieve the user's current position,
20 | including latitude, longitude, altitude, accuracy, heading, speed, and
21 | timestamp.
22 |
23 |
24 |
25 | ### Parameters
26 |
27 |
28 | | Name | Type | Description |
29 | | ------- | ------ | ----------- |
30 | | options | object | This is an optional configuration object provided when calling `useGeolocation`. It is used when calling `navigator.geolocation.getCurrentPosition()` and `navigator.geolocation.watchPosition()`. Some of the attributes it accepts are `enableHighAccuracy`, `timeout`, and `maximumAge`. |
31 |
32 |
33 | ### Return Values
34 |
35 | The hook returns an object containing the following properties:
36 |
37 |
38 | | Name | Type | Description |
39 | | ----------------- | ------- | ----------- |
40 | | loading | boolean | A boolean indicating if the geolocation data is currently being fetched. |
41 | | accuracy | number | The accuracy of the latitude and longitude properties in meters. |
42 | | altitude | number | The altitude in meters above the mean sea level. |
43 | | altitudeAccuracy | number | The accuracy of altitude in meters. |
44 | | heading | number | The direction in which the device is traveling. This value, specified in degrees, indicates how far off from heading true north the device is. |
45 | | latitude | number | The latitude in decimal degrees. |
46 | | longitude | number | The longitude in decimal degrees. |
47 | | speed | number | The current ground speed of the device, specified in meters per second. |
48 | | timestamp | number | The timestamp at which the geolocation data was retrieved. |
49 | | error | object | An error object, if an error occurred while retrieving the geolocation data. |
50 |
;
83 | }
84 |
85 | return ;
86 | }
87 | ```
88 |
89 |
90 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useHistoryState.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useHistoryState
3 | rank: 35
4 | tagline: Add undo / redo functionality with useHistoryState.
5 | sandboxId: usehistorystate-tubwyj
6 | previewHeight: 400px
7 | relatedHooks:
8 | - usemap
9 | - useset
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useHistoryState hook is useful for managing state with undo and redo
18 | capabilities in React components. The hook offers functions like undo, redo,
19 | set, and clear to interact with the state as well as other state related
20 | values like canUndo and canRedo.
21 |
22 |
23 |
24 | ### Parameters
25 |
26 |
27 | | Name | Type | Description |
28 | | -------------- | ------ | -------------------------------------------------- |
29 | | initialPresent | object | (Optional) The initial state value. Default: `{}`. |
30 |
31 |
32 | ### Return Value
33 |
34 | The `useHistoryState` hook returns an object with the following properties and functions:
35 |
36 |
37 | | Name | Type | Description |
38 | | ------- | -------- | ---------------------------------------------------------- |
39 | | state | any | The current state value. |
40 | | set | function | A function to set the state value. |
41 | | undo | function | A function to undo the previous state. |
42 | | redo | function | A function to redo the next state. |
43 | | clear | function | A function to clear the state history and reset the state. |
44 | | canUndo | boolean | Indicates whether an undo action is available. |
45 | | canRedo | boolean | Indicates whether a redo action is available. |
46 |
115 |
116 | );
117 | }
118 | ```
119 |
120 |
121 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useHover.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useHover
3 | rank: 24
4 | tagline: Track whether an element is being hovered over with useHover.
5 | sandboxId: usehover-9lxxmo
6 | previewHeight: 420px
7 | relatedHooks:
8 | - uselockbodyscroll
9 | ---
10 |
11 | import CodePreview from "../../components/CodePreview.astro";
12 | import HookDescription from "../../components/HookDescription.astro";
13 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
14 |
15 |
16 | The useHover hook allows you to track whether an element is being hovered over
17 | or not. The hook returns a reference to attach to the target element and the
18 | current hovering status, enabling you to apply conditional rendering or
19 | perform any desired actions based on the hover state.
20 |
21 |
22 |
23 | ### Return Value
24 |
25 | The `useHover` hook returns an array with the following elements:
26 |
27 |
28 | | Index | Type | Description |
29 | | ----- | ------- | -------------------------------------------------------------------------- |
30 | | 0 | ref | A ref object that can be attached to the element intended to be hovered. |
31 | | 1 | boolean | A boolean value indicating whether the element is currently being hovered. |
32 |
61 |
62 | Hovering? {hovering ? "Yes" : "No"}
63 |
64 |
65 | );
66 | }
67 | ```
68 |
69 |
70 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useIdle.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useIdle
3 | rank: 33
4 | tagline: Detect user inactivity with useIdle.
5 | sandboxId: useidle-myg19f
6 | previewHeight: 200px
7 | relatedHooks:
8 | - usevisibilitychange
9 | - usebattery
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useIdle hook is a useful tool for detecting user inactivity within a web
18 | application. It tracks user interaction and determines if a specified duration
19 | of time has passed without any activity. This hook is particularly handy for
20 | implementing features like automatic logout, displaying notifications after a
21 | period of inactivity, or adjusting UI elements based on user engagement.
22 |
23 |
24 |
25 | ### Parameters
26 |
27 |
28 | | Name | Type | Description |
29 | | ---- | ------ | ----------- |
30 | | ms | number | This is the duration of idle time (in milliseconds) after which the `idle` state will be set to `true`. The default value is `20 * 1000` (20 seconds). |
31 |
32 |
33 | ### Return Values
34 |
35 |
36 | | Name | Type | Description |
37 | | ---- | ------- | ----------- |
38 | | idle | boolean | A boolean indicating if the user is idle. It is `true` if the user has been idle for at least `ms` milliseconds. |
39 |
}
63 |
64 | );
65 | }
66 | ```
67 |
68 |
69 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useInterval.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useInterval
3 | experimental: true
4 | rank: 19
5 | tagline: Schedule periodic actions like data polling or animations with useInterval.
6 | sandboxId: useinterval-81c43g
7 | previewHeight: 500px
8 | relatedHooks:
9 | - useintervalwhen
10 | - usecontinuousretry
11 | ---
12 |
13 | import CodePreview from "../../components/CodePreview.astro";
14 | import HookDescription from "../../components/HookDescription.astro";
15 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
16 |
17 |
18 | The useInterval hook provides a convenient way to create and manage intervals.
19 | The hook sets up an interval that repeatedly invokes the callback function at
20 | the specified interval. The interval is automatically cleared when the
21 | component unmounts or when the interval duration changes. This hook is useful
22 | for scenarios where you need to perform a certain action or update the
23 | component periodically, such as polling for data updates or implementing
24 | animations.
25 |
26 |
27 |
28 | ### Parameters
29 |
30 |
31 | | Name | Type | Description |
32 | | ---- | -------- | --------------------------------------------------------------- |
33 | | cb | function | The callback function to be executed at the specified interval. |
34 | | ms | number | The interval duration in milliseconds. |
35 |
36 |
37 | ### Return Value
38 |
39 |
40 | | Name | Type | Description |
41 | | ------------- | -------- | -------------------------------------------------------- |
42 | | clearInterval | function | A function to clear the interval and stop the execution. |
43 |
76 |
79 |
80 |
81 | );
82 | }
83 | ```
84 |
85 |
86 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useIntervalWhen.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useIntervalWhen
3 | experimental: true
4 | rank: 18
5 | tagline: Create dynamic timers that can be started, paused, or resumed with useIntervalWhen.
6 | sandboxId: useintervalwhen-cp7e31
7 | previewHeight: 400px
8 | relatedHooks:
9 | - userandominterval
10 | - usecontinuousretry
11 | ---
12 |
13 | import CodePreview from "../../components/CodePreview.astro";
14 | import HookDescription from "../../components/HookDescription.astro";
15 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
16 |
17 |
18 | The useIntervalWhen hook is useful for creating an interval timer that can be
19 | controlled based on certain conditions. It allows you to specify a callback
20 | function to be executed at a regular interval specified by the ms parameter.
21 | Additionally, you can choose whether the interval should start immediately or
22 | wait for a trigger by setting the startImmediately parameter. This hook is
23 | particularly handy when you need to create dynamic timers that can be started,
24 | paused, or resumed based on specific conditions.
25 |
26 |
27 | ### Parameters
28 |
29 |
30 | | Name | Type | Description |
31 | | ------------------------ | -------- | --------------------------------------------------------------------------------------------------- |
32 | | cb | function | The callback function to be executed at the specified interval when the condition is met. |
33 | | options | object | An object containing the following options. |
34 | | options.ms | number | The interval duration in milliseconds. |
35 | | options.when | boolean | The condition that determines whether the interval should be active (`true`) or paused (`false`). |
36 | | options.startImmediately | boolean | (Optional) Whether to start the interval immediately when the condition is met. Default is `false`. |
37 |
38 |
39 | ### Return Value
40 |
41 |
42 | | Type | Description |
43 | | -------- | --------------------------------------------------------- |
44 | | function | A function to clear the interval and pause the execution. |
45 |
73 |
80 |
81 | );
82 | }
83 | ```
84 |
85 |
86 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useIsClient.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useIsClient
3 | rank: 22
4 | tagline: Determine whether the code is running on the client-side or server-side with useIsClient.
5 | sandboxId: useisclient-4edyux
6 | previewHeight: 240px
7 | relatedHooks:
8 | - userenderinfo
9 | ---
10 |
11 | import CodePreview from "../../components/CodePreview.astro";
12 | import HookDescription from "../../components/HookDescription.astro";
13 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
14 |
15 |
16 | useIsClient is useful for determining if it's safe to run certain client-only hooks like useMediaQuery or useLocalStorage. It returns a boolean determining if React's useEffect hook has finished running (which means the app is being rendered on the client and it's safe to use browser specific APIs).
17 |
18 |
19 |
20 | ### Parameters
21 |
22 | The `useIsClient` hook does not accept any parameters.
23 |
24 | ### Return Value
25 |
26 |
27 | | Name | Type | Description |
28 | | -------- | ------- | ------------------------------------------------------------------ |
29 | | isClient | boolean | `true` if running in a client-side environment, `false` otherwise. |
30 |
{isClient ? "If you can see this ... you already know" : "No"}
52 |
53 | );
54 | }
55 | ```
56 |
57 |
58 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useIsFirstRender.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useIsFirstRender
3 | rank: 41
4 | tagline: Differentiate between the first and subsequent renders with useIsFirstRender.
5 | sandboxId: useisfirstrender-rny2tm
6 | previewHeight: 300px
7 | relatedHooks:
8 | - userendercount
9 | - uselogger
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useIsFirstRender hook is a useful for determining whether the current
18 | render is the first render of a component. This hook is particularly valuable
19 | when you want to conditionally execute certain logic or render specific
20 | components only on the initial render, providing an efficient way to
21 | differentiate between the first and subsequent renders.
22 |
23 |
24 |
25 | ### Return Value
26 |
27 |
28 | | Name | Type | Description |
29 | | ------------- | ------- | ------------------------------------------------ |
30 | | isFirstRender | boolean | `true` for the first render, `false` for others. |
31 |
57 |
58 | );
59 | }
60 | ```
61 |
62 |
63 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useKeyPress.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useKeyPress
3 | experimental: true
4 | rank: 27
5 | tagline: Detect and perform actions on key press events with useKeyPress.
6 | sandboxId: usekeypress-7vgzwf
7 | previewHeight: 350px
8 | relatedHooks:
9 | - useeventlistener
10 | - usehover
11 | ---
12 |
13 | import CodePreview from "../../components/CodePreview.astro";
14 | import HookDescription from "../../components/HookDescription.astro";
15 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
16 |
17 |
18 | The useKeyPress hook is a useful for detecting key presses and performing
19 | specific actions based on the pressed key. By calling useKeyPress with the
20 | desired key and callback function, the hook sets up an event listener that
21 | triggers the callback when the specified key is pressed.
22 |
23 |
24 |
25 | ### Parameters
26 |
27 |
28 | | Name | Type | Description |
29 | | -------------------- | --------------------- | ------------------------------------------------------------------------------------------------------ |
30 | | key | string | The key to listen for. |
31 | | cb | function | The callback function to be executed when the key is pressed. |
32 | | options | object | (Optional) Additional options for the key press event. |
33 | | options.event | string | (Optional) The event type to listen for. Default is `"keydown"`. |
34 | | options.target | DOM element or window | (Optional) The target element or `window` object to attach the event listener to. Default is `window`. |
35 | | options.eventOptions | object | (Optional) Additional options for the event listener. |
36 |
70 |
71 |
74 |
77 |
80 |
83 |
84 | {Boolean(activeKey) && }
85 |
86 | );
87 | }
88 | ```
89 |
90 |
91 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useList.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useList
3 | rank: 48
4 | tagline: Manage and manipulate lists with useList.
5 | sandboxId: uselist-5mmpw2
6 | previewHeight: 550px
7 | relatedHooks:
8 | - usehistorystate
9 | - useprevious
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useList hook is useful for managing and manipulating lists in a React
18 | component. It encapsulates the list state and provides a set of convenient
19 | methods to modify the list. By using this hook, you can easily initialize a
20 | list with a default value and access various methods to add, remove, update,
21 | or clear elements within the list.
22 |
23 |
24 |
25 | ### Parameters
26 |
27 |
28 | | Name | Type | Description |
29 | | ----------- | ----- | -------------------------------------------------------- |
30 | | defaultList | array | The initial list of elements. Default is an empty array. |
31 |
32 |
33 | ### Return Value
34 |
35 | The `useList` hook returns an array with two elements:
36 |
37 |
38 | | Name | Parameters | Description |
39 | | -------------- | --------------------------- | ----------------------------------------------------------------- |
40 | | `[0]` | | The current list of elements. |
41 | | `[1].set` | l: array | Replaces the entire list with a new array `l`. |
42 | | `[1].push` | element: any | Appends the `element` to the end of the list. |
43 | | `[1].removeAt` | index: number | Removes the element at the specified `index` from the list. |
44 | | `[1].insertAt` | index: number, element: any | Inserts the `element` at the specified `index` in the list. |
45 | | `[1].updateAt` | index: number, element: any | Replaces the element at the specified `index` with the `element`. |
46 | | `[1].clear` | | Removes all elements from the list. |
47 |
72 |
79 |
86 |
89 |
92 |
93 |
99 |
100 | );
101 | }
102 | ```
103 |
104 |
105 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useLocalStorage.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useLocalStorage
3 | rank: 2
4 | tagline: Store, retrieve, and synchronize data from the browser’s localStorage API with useLocalStorage
5 | sandboxId: uselocalstorage-e6v6ey
6 | previewHeight: 670px
7 | relatedHooks:
8 | - usesessionstorage
9 | ---
10 |
11 | import CodePreview from "../../components/CodePreview.astro";
12 | import HookDescription from "../../components/HookDescription.astro";
13 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
14 |
15 |
16 | The useLocalStorage hook provides a convenient way to synchronize the state of
17 | a component with the data stored in local storage. It automatically reads the
18 | initial value from local storage when the component mounts and updates the
19 | local storage whenever the state changes. Additionally, it listens for changes
20 | in local storage made by other tabs or windows and keeps the component’s state
21 | up to date.
22 |
23 |
24 |
25 | ### Parameters
26 |
27 |
28 | | Name | Type | Description |
29 | |------|------|-------------|
30 | | key | string | The key used to access the local storage value. |
31 | | initialValue | any | The initial value to use if there is no item in the local storage with the provided key. |
32 |
33 |
34 | ### Return Values
35 |
36 |
37 | | Name | Type | Description |
38 | |------|------|-------------|
39 | | localState | any | The current state of the value stored in local storage. |
40 | | handleSetState | function | A function to set the state of the value in the local storage. This function accepts a new value or a function that returns a new value. The value is also saved in the local storage under the provided key. |
41 |
64 |
65 | {["red", "blue", "green", "pink", "purple", "yellow"].map((color) => {
66 | return (
67 |
74 | );
75 | })}
76 |
79 |
80 |
81 | );
82 | }
83 | ```
84 |
85 |
86 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useLogger.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useLogger
3 | experimental: true
4 | rank: 39
5 | tagline: Debug lifecycle events with useLogger.
6 | sandboxId: uselogger-o2e03i
7 | previewHeight: 500px
8 | relatedHooks:
9 | - userendercount
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useLogger hook is useful for logging various lifecycle events in a React
18 | component. This custom hook accepts a name parameter and additional arguments,
19 | and it logs the lifecycle events (mounted, updated, and unmounted) along with
20 | the provided name and arguments. This useLogger hook can be employed to
21 | facilitate debugging, monitoring, or performance optimization by providing
22 | insights into when and how a component’s lifecycle events occur.
23 |
24 |
25 |
26 | ### Parameters
27 |
28 |
29 | | Name | Type | Description |
30 | | ------- | ------ | -------------------------------------- |
31 | | name | string | The name or identifier for the logger. |
32 | | ...rest | any | Additional arguments to be logged. |
33 |
82 |
83 | );
84 | }
85 | ```
86 |
87 |
88 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useLongPress.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useLongPress
3 | rank: 42
4 | tagline: Enable precise control of long-press interactions for both touch and mouse events with useLongPress.
5 | sandboxId: uselongpress-0fpxj6
6 | previewHeight: 240px
7 | relatedHooks:
8 | - usemeasure
9 | - usetoggle
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useLongPress hook enhances React applications by managing long-press
18 | interactions for both mouse and touch events, thereby ensuring a consistent
19 | user experience across devices. This hook not only broadens user interactivity
20 | but also allows for customization, providing developers the flexibility to
21 | adjust the long-press functionality according to their application needs.
22 |
23 |
24 |
25 | ### Parameters
26 |
27 |
28 | | Name | Type | Description |
29 | | -------------------- | -------- | ----------- |
30 | | callback | function | This is the function to be executed when a long press event is detected. |
31 | | options | object | This is an optional configuration object provided when calling `useLongPress`. |
32 | | options.threshold | number | This is the time (in milliseconds) the user must press and hold to trigger a long press event. Default value is `400`. |
33 | | options.onStart | function | This function is called when the user starts pressing. |
34 | | options.onFinish | function | This function is called when a long press event finishes successfully (the user releases after the threshold). |
35 | | options.onCancel | function | This function is called when a press event is cancelled (the user releases before the threshold). |
36 |
37 |
38 | ### Return Values
39 |
40 |
41 | | Name | Type | Description |
42 | | ------------ | -------- | ----------- |
43 | | onMouseDown | function | This is the mouse down event handler. |
44 | | onMouseUp | function | This is the mouse up event handler. |
45 | | onMouseLeave | function | This is the mouse leave event handler. |
46 | | onTouchStart | function | This is the touch start event handler. |
47 | | onTouchEnd | function | This is the touch end event handler. |
48 |
80 |
83 | {isOpen && (
84 |
89 | )}
90 |
91 | );
92 | }
93 | ```
94 |
95 |
96 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useMap.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useMap
3 | rank: 28
4 | tagline: Synchronize and update state based on the Map data structure with useMap.
5 | sandboxId: usemap-ev8nd1
6 | previewHeight: 300px
7 | relatedHooks:
8 | - usequeue
9 | - useset
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useMap hook provides a wrapper around the JavaScript Map object and allows
18 | you to easily update and synchronize the map state with the component’s
19 | rendering. By using this hook, you can add, delete, or clear entries in the
20 | map while ensuring that the component re-renders whenever these operations are
21 | performed.
22 |
23 |
24 |
25 | ### Return Value
26 |
27 |
28 | | Name | Type | Description |
29 | | ---- | ---------- | ------------------------------------------------------ |
30 | | map | map object | An instance of the `Map` object with enhanced methods. |
31 |
92 |
93 | );
94 | }
95 | ```
96 |
97 |
98 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useMeasure.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useMeasure
3 | rank: 46
4 | tagline: Effortlessly measure and track your component’s dimensions with useMeasure.
5 | sandboxId: usemeasure-3kyegb
6 | previewHeight: 300px
7 | relatedHooks:
8 | - usepreferredlanguage
9 | ---
10 |
11 | import CodePreview from "../../components/CodePreview.astro";
12 | import HookDescription from "../../components/HookDescription.astro";
13 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
14 |
15 |
16 | The useMeasure hook provides a convenient and efficient way to monitor and
17 | respond to changes in the size of a React component. This custom hook uses the
18 | ResizeObserver API to actively track changes in the component’s dimensions,
19 | such as width and height, and keeps them available as state. The returned ref
20 | is used on the element whose dimensions you want to measure, making it a
21 | valuable tool for responsive design and dynamic layout adjustments.
22 |
23 |
24 |
25 | ### Return Value
26 |
27 |
28 | | Name | Type | Description |
29 | | --- | --- | --- |
30 | | ref | React ref object | A React reference that can be attached to a DOM element to observe. |
31 | | rect | object | An object containing the width and height of the observed element. |
32 |
33 |
34 | ### rect Object Properties
35 |
36 |
37 | | Property | Type | Description |
38 | | --- | --- | --- |
39 | | width | number | Width of the observed element. |
40 | | height | number | Height of the observed element. |
41 |
85 |
86 |
87 | );
88 | }
89 |
90 | ```
91 |
92 |
93 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useMediaQuery.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useMediaQuery
3 | rank: 7
4 | tagline: Subscribe and respond to media query changes with useMediaQuery.
5 | sandboxId: usemediaquery-qu6bcp
6 | previewHeight: 400px
7 | relatedHooks:
8 | - useintersectionobserver
9 | - usemeasure
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useMediaQuery hook leverages the window.matchMedia API to subscribe to CSS
18 | media query changes, thereby providing real-time responsiveness to dynamic
19 | changes in the viewport or screen orientation. It allows the component to
20 | rerender whenever the media query’s result changes. It throws an error if
21 | attempted to be used on the server-side (media queries only work in the
22 | browser).
23 |
24 |
25 |
26 | ### Parameters
27 |
28 |
29 | | Name | Type | Description |
30 | | ----- | ------ | --------------------------------- |
31 | | query | string | The media query to listen changes |
32 |
33 |
34 | ### Return Value
35 |
36 |
37 | | Type | Description |
38 | | ------- | --------------------------------------------------------------------------------------------------- |
39 | | boolean | Returns a boolean value indicating whether the media query matches the current state of the device. |
40 |
70 | Resize your browser windows to see changes.
71 |
72 |
73 | {phone}
74 | Small
75 |
76 |
77 | {tablet}
78 | Medium
79 |
80 |
81 | {laptop}
82 | Large
83 |
84 |
85 | {desktop}
86 | Extra Large
87 |
88 |
89 |
90 | );
91 | }
92 | ```
93 |
94 |
95 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useMouse.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useMouse
3 | rank: 50
4 | tagline: Track and retrieve the position of the mouse cursor with useMouse.
5 | sandboxId: usemouse-8yu3mi
6 | previewHeight: 450px
7 | relatedHooks:
8 | - usehover
9 | - useeventlistener
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useMouse hook is useful for tracking and retrieving the position of the
18 | mouse cursor within a component. By utilizing this hook, developers can easily
19 | access information such as the current coordinates of the mouse cursor (x and
20 | y), the position of the mouse cursor relative to an element within the
21 | component (elementX and elementY), and the position of that element on the
22 | page (elementPositionX and elementPositionY).
23 |
24 |
25 |
26 | ### Parameters
27 |
28 | None.
29 |
30 | ### Return Value
31 |
32 | The `useMouse` hook returns an array with two elements:
33 |
34 |
35 | | Name | Type | Description |
36 | | ------- | ------ | -------------------------------------------------------------------------------- |
37 | | `state` | object | An object representing the current mouse position and element information. |
38 | | `ref` | object | A ref object that can be used to track the mouse position on a specific element. |
39 |
40 |
41 | The `state` object has the following properties:
42 |
43 |
44 | | Name | Type | Description |
45 | | ------------------------ | ------ | --------------------------------------------------------------------------------------- |
46 | | `state.x` | number | The current horizontal position of the mouse relative to the page. |
47 | | `state.y` | number | The current vertical position of the mouse relative to the page. |
48 | | `state.elementX` | number | The current horizontal position of the mouse relative to the element’s top-left corner. |
49 | | `state.elementY` | number | The current vertical position of the mouse relative to the element’s top-left corner. |
50 | | `state.elementPositionX` | number | The current horizontal position of the element relative to the page. |
51 | | `state.elementPositionY` | number | The current vertical position of the element relative to the page. |
52 |
77 |
82 | Use a ref to add coords relative to the element
83 |
84 |
85 |
86 | );
87 | }
88 | ```
89 |
90 |
91 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useObjectState.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useObjectState
3 | rank: 38
4 | tagline: Manage complex state objects with useObjectState.
5 | sandboxId: useobjectstate-75lmg2
6 | previewHeight: 350px
7 | relatedHooks:
8 | - usevisibilitychange
9 | - useset
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useObjectState hook is useful for managing complex state objects. It
18 | provides a convenient way to initialize and update state values using a single
19 | hook. By using this hook, you can easily create and maintain state objects
20 | with initial values, and then update them through a flexible "handleUpdate"
21 | function. This function accepts either a callback function or an object,
22 | allowing you to merge new values into the existing state object.
23 |
24 |
25 |
26 | ### Parameters
27 |
28 |
29 | | Name | Type | Description |
30 | | ------------ | ------ | ----------------------------------- |
31 | | initialValue | object | (Optional) The initial state value. |
32 |
33 |
34 | ### Return Value
35 |
36 | The `useObjectState` hook returns an array with the following elements:
37 |
38 |
39 | | Index | Type | Description |
40 | | ----- | -------- | -------------------------------------- |
41 | | 0 | object | The current state object. |
42 | | 1 | function | A function to update the state object. |
43 |
117 |
118 | );
119 | }
120 | ```
121 |
122 |
123 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useOrientation.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useOrientation
3 | rank: 8
4 | tagline: Manage and respond to changes in device orientation with useOrientation.
5 | sandboxId: useorientation-f04nej
6 | previewHeight: 400px
7 | relatedHooks:
8 | - usenetworkstate
9 | - usemediaquery
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useOrientation React Hook simplifies the management of a device’s
18 | orientation within a React application. It wraps the complexity of listening
19 | for, handling, and cleaning up after orientation changes into a reusable hook.
20 | By abstracting this logic, the hook allows you to easily track device
21 | orientation, resulting in cleaner and more readable code. It adapts to both
22 | the Screen Orientation API and the deprecated window.orientation property,
23 | providing flexibility across different browser capabilities.
24 |
25 |
26 |
27 | ### Parameters
28 |
29 | This hook doesn’t accept any parameters.
30 |
31 | ### Return Value
32 |
33 |
34 | | Name | Type | Description |
35 | | ----- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
36 | | angle | number | The current orientation angle of the device in degrees. |
37 | | type | string | The current orientation type of the device (e.g., 'portrait-primary', 'landscape-primary', 'portrait-secondary', 'landscape-secondary'). If the type cannot be determined, it is 'UNKNOWN'. |
38 |
75 |
76 | );
77 | }
78 | ```
79 |
80 |
81 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/usePageLeave.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: usePageLeave
3 | experimental: true
4 | rank: 37
5 | tagline: Track when a user navigates away from a webpage with usePageLeave.
6 | sandboxId: usepageleave-p8hjp3
7 | previewHeight: 300px
8 | relatedHooks:
9 | - usevisibilitychange
10 | - useset
11 | ---
12 |
13 | import CodePreview from "../../components/CodePreview.astro";
14 | import HookDescription from "../../components/HookDescription.astro";
15 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
16 |
17 |
18 | The usePageLeave hook is useful for tracking when a user leaves a webpage or
19 | navigates away from it. When the mouseout event is triggered, the callback
20 | function is executed only if the user’s cursor moves outside the webpage or
21 | onto an element outside the webpage (e.g., the browser’s address bar). This
22 | hook is beneficial for scenarios where you need to perform specific actions
23 | when a user leaves your webpage, such as saving user progress, displaying a
24 | confirmation prompt, or triggering analytics events.
25 |
26 |
27 |
28 | ### Parameters
29 |
30 |
31 | | Name | Type | Description |
32 | | ---- | -------- | ------------------------------------ |
33 | | cb | function | The callback function to be invoked. |
34 |
63 |
64 | );
65 | }
66 | ```
67 |
68 |
69 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/usePreferredLanguage.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: usePreferredLanguage
3 | rank: 10
4 | tagline: Adapt to user language preferences dynamically with usePreferredLanguage.
5 | sandboxId: usepreferredlanguage-v3dcoh
6 | previewHeight: 300px
7 | relatedHooks:
8 | - usetoggle
9 | ---
10 |
11 | import CodePreview from "../../components/CodePreview.astro";
12 | import HookDescription from "../../components/HookDescription.astro";
13 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
14 |
15 |
16 | The usePreferredLanguage hook automatically adapts to the preferred language
17 | of the user. The hook reactively returns a string that represents the
18 | preferred language of the user, as set in the browser settings.
19 |
20 |
21 |
22 | ### Return Value
23 |
24 |
25 | | Name | Type | Description |
26 | | ------------- | ------ | ------------------------------------------------------------------------------------------------------------- |
27 | | language | string | The hook returns a string that represents the preferred language of the user, as set in the browser settings. |
28 |
Change language here - chrome://settings/languages
49 |
50 | The correct date format for
{language}
is{" "}
51 |
52 |
53 |
54 | );
55 | }
56 | ```
57 |
58 |
59 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/usePrevious.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: usePrevious
3 | rank: 4
4 | tagline: Track the previous value of a variable with usePrevious.
5 | sandboxId: useprevious-diev3s
6 | previewHeight: 600px
7 | relatedHooks:
8 | - usehistorystate
9 | ---
10 |
11 | import CodePreview from "../../components/CodePreview.astro";
12 | import HookDescription from "../../components/HookDescription.astro";
13 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
14 |
15 |
16 | The usePrevious hook is a useful tool for tracking the previous value of a
17 | variable in a functional component. This can be particularly handy in
18 | scenarios where it is necessary to compare the current value with the previous
19 | one, such as triggering actions or rendering based on changes.
20 |
21 |
22 |
23 | ### Parameters
24 |
25 |
26 | | Name | Type | Description |
27 | | -------- | ---- | -------------------------------------------------- |
28 | | newValue | any | The new value to track and return the previous of. |
29 |
30 |
31 | ### Return Value
32 |
33 |
34 | | Name | Type | Description |
35 | | ------------- | ---- | ---------------------------------------------- |
36 | | previousValue | any | The previous value of the provided `newValue`. |
37 |
75 |
78 |
79 |
80 |
81 | Previous: {previousColor}
82 |
83 |
84 |
85 | Current: {color}
86 |
87 |
88 |
89 | );
90 | }
91 | ```
92 |
93 |
94 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useQueue.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useQueue
3 | rank: 23
4 | tagline: Add, remove, and clear element from a queue data structure with useQueue.
5 | sandboxId: usequeue-s7x0yg
6 | previewHeight: 400px
7 | relatedHooks:
8 | - usemap
9 | - useset
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useQueue hook is a useful tool for managing a queue of elements within a
18 | functional component. It allows you to easily add, remove, and clear elements
19 | from the queue while maintaining the necessary state updates. The hook returns
20 | an object that includes the functions for manipulating the queue (add, remove,
21 | and clear), as well as additional properties such as first, last, size, and
22 | queue.
23 |
24 |
25 |
26 | ### Parameters
27 |
28 |
29 | | Name | Type | Description |
30 | | ------------ | ----- | ---------------------------------------------------------------------- |
31 | | initialValue | array | (Optional) The initial value for the queue. Default is an empty array. |
32 |
33 |
34 | ### Return Value
35 |
36 | The `useQueue` hook returns an object with the following properties and methods:
37 |
38 |
39 | | Name | Type | Description |
40 | | ------ | -------- | ----------------------------------------------------- |
41 | | add | function | Adds an element to the end of the queue. |
42 | | remove | function | Removes and returns the first element from the queue. |
43 | | clear | function | Clears the queue, removing all elements. |
44 | | first | any | The first element in the queue. |
45 | | last | any | The last element in the queue. |
46 | | size | number | The number of elements in the queue. |
47 | | queue | array | The current array representing the queue. |
48 |
106 | );
107 | }
108 | ```
109 |
110 |
111 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useRandomInterval.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useRandomInterval
3 | experimental: true
4 | rank: 17
5 | tagline: Execute a callback function at a random interval with useRandomInterval.
6 | sandboxId: userandominterval-rh8q99
7 | previewHeight: 500px
8 | relatedHooks:
9 | - usecontinuousretry
10 | - useintervalwhen
11 | ---
12 |
13 | import CodePreview from "../../components/CodePreview.astro";
14 | import HookDescription from "../../components/HookDescription.astro";
15 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
16 |
17 |
18 | The useRandomInterval hook is useful for executing a callback function at
19 | random intervals within a specified range. It provides a way to create an
20 | interval that varies dynamically based on minimum and maximum delay values. By
21 | using this hook, you can easily implement features such as periodic data
22 | updates, animations, or any other functionality that requires dynamic and
23 | random timing. The hook manages the interval internally, ensuring that it is
24 | cleared when the component unmounts or when the delay values change.
25 |
26 |
27 |
28 | ### Parameters
29 |
30 |
31 | | Name | Type | Description |
32 | | ---------------- | -------- | ------------------------------------------------------------------- |
33 | | cb | function | The callback function to be executed at random intervals. |
34 | | options | object | An object containing the following options. |
35 | | options.minDelay | number | The minimum delay in milliseconds between each callback invocation. |
36 | | options.maxDelay | number | The maximum delay in milliseconds between each callback invocation. |
37 |
38 |
39 | ### Return Value
40 |
41 |
42 | | Type | Description |
43 | | -------- | ----------------------------------------------------------------------- |
44 | | function | A function to clear the timeout and stop the random interval execution. |
45 |
76 |
79 |
80 | );
81 | }
82 | ```
83 |
84 |
85 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useRenderCount.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useRenderCount
3 | rank: 16
4 | tagline: Identify unnecessary re-renders and monitor update frequency with useRenderCount.
5 | sandboxId: userendercount-ghn1dg
6 | previewHeight: 320px
7 | relatedHooks:
8 | - userenderinfo
9 | ---
10 |
11 | import CodePreview from "../../components/CodePreview.astro";
12 | import HookDescription from "../../components/HookDescription.astro";
13 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
14 |
15 |
16 | The useRenderCount hook is a useful tool for tracking the number of times a
17 | component renders or re-renders. Each time the component renders, the count
18 | value is incremented, allowing you to keep track of the render count. This can
19 | be helpful in optimizing performance, identifying unnecessary re-renders, or
20 | monitoring how frequently a component is being updated. The hook provides a
21 | simple and efficient way to gain insights into the rendering behavior of your
22 | components.
23 |
24 |
25 |
26 | ### Return Value
27 |
28 | | Name | Type | Description |
29 | | ----------- | ------ | ----------------------------------------------- |
30 | | renderCount | number | The number of times the component has rendered. |
31 |
60 |
61 | );
62 | }
63 | ```
64 |
65 |
66 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useRenderInfo.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useRenderInfo
3 | rank: 15
4 | tagline: Debug renders and improve performance with useRenderInfo.
5 | sandboxId: userenderinfo-njhqlg
6 | previewHeight: 400px
7 | relatedHooks:
8 | - userendercount
9 | ---
10 |
11 | import CodePreview from "../../components/CodePreview.astro";
12 | import HookDescription from "../../components/HookDescription.astro";
13 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
14 |
15 |
16 | The useRenderInfo hook is useful for tracking and logging rendering
17 | information in a component. It keeps track of the number of renders, the time
18 | elapsed since the last render, and the timestamp of the current render. This
19 | hook is particularly helpful during development as it provides insights into
20 | the rendering behavior of a component, allowing developers to optimize
21 | performance and identify potential issues.
22 |
23 |
24 |
25 | ### Return Value
26 |
27 |
28 | | Name | Type | Description |
29 | | -------------------- | ------ | ----------------------------------------------------------------- |
30 | | info | object | An object containing information about the component’s rendering. |
31 | | info.name | string | The name of the component. |
32 | | info.renders | number | The number of times the component has rendered. |
33 | | info.sinceLastRender | number | The time elapsed in milliseconds since the last render. |
34 | | info.timestamp | number | The timestamp of the current render. |
35 |
77 |
78 | );
79 | }
80 | ```
81 |
82 |
83 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useScript.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useScript
3 | rank: 14
4 | tagline: Load and manage external JavaScript scripts with useScript.
5 | sandboxId: usescript-dux91r
6 | previewHeight: 300px
7 | relatedHooks:
8 | - usefetch
9 | ---
10 |
11 | import CodePreview from "../../components/CodePreview.astro";
12 | import HookDescription from "../../components/HookDescription.astro";
13 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
14 |
15 |
16 | The useScript hook is useful for dynamically loading external JavaScript
17 | scripts into a React component. It manages the loading and status of the
18 | script, allowing you to conditionally render components or perform actions
19 | based on whether the script has been successfully loaded or encountered an
20 | error. The hook keeps track of the script’s status and provides this status as a return value. Additionally,
21 | it offers options to remove the script when the component is unmounted,
22 | ensuring proper cleanup.
23 |
24 |
25 |
26 | ### Parameters
27 |
28 |
29 | | Name | Type | Description |
30 | | ---------------- | ------ | ----------- |
31 | | src | string | This is the URL source of the script to be loaded. |
32 | | options | object | This is an optional configuration object provided when calling `useScript`. It currently accepts one property `removeOnUnmount` which when set to `true`, will remove the script tag from the document body on component unmount. |
33 |
34 |
35 | ### Return Values
36 |
37 |
38 | | Name | Type | Description |
39 | | ------ | ------ | ----------- |
40 | | status | string | This represents the status of the script load, `loading`, `ready`, `error`, or `unknown`. An `unknown` script is one that previously exists in the document, but was not added via `useScript`. |
41 |
80 | {status === "ready" && (
81 |
82 | )}
83 |
84 | );
85 | }
86 | ```
87 |
88 |
89 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useSet.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useSet
3 | rank: 30
4 | tagline: Synchronize and update state based on the Set data structure with useSet.
5 | sandboxId: useset-2jx1ou
6 | previewHeight: 500px
7 | relatedHooks:
8 | - usemap
9 | - usequeue
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useSet hook is useful for managing and manipulating the Set data structure
18 | within a React component. It provides a way to create and maintain a set of
19 | values, offering additional functionality through custom methods like "add,"
20 | "clear," and "delete." By utilizing this hook, developers can easily update
21 | and track changes to the set, triggering re-renders of the component whenever
22 | modifications occur.
23 |
24 |
25 |
26 | ### Parameters
27 |
28 |
29 | | Name | Type | Description |
30 | | ------ | ----- | -------------------------------------- |
31 | | values | array | (Optional) Initial values for the set. |
32 |
33 |
34 | ### Return Value
35 |
36 |
37 | | Name | Type | Description |
38 | | ---- | ---- | ------------------------------------------------------ |
39 | | set | set | An instance of the `Set` object with enhanced methods. |
40 |
120 |
121 | );
122 | }
123 | ```
124 |
125 |
126 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useThrottle.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useThrottle
3 | rank: 29
4 | tagline: Throttle computationally expensive operations with useThrottle.
5 | sandboxId: usethrottle-xzfoz7
6 | previewHeight: 300px
7 | relatedHooks:
8 | - usefetch
9 | ---
10 |
11 | import CodePreview from "../../components/CodePreview.astro";
12 | import HookDescription from "../../components/HookDescription.astro";
13 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
14 |
15 |
16 | The useThrottle hook offers a controlled way to manage execution frequency in
17 | a React application. By accepting a value and an optional interval, it ensures
18 | that the value is updated at most every interval milliseconds. This is
19 | particularly helpful for limiting API calls, reducing UI updates, or
20 | mitigating performance issues by throttling computationally expensive
21 | operations.
22 |
23 |
24 |
25 | ### Parameters
26 |
27 |
28 | | Name | Type | Description |
29 | | -------- | ------ | -------------------------------------------------------- |
30 | | value | any | The value to throttle. |
31 | | interval | number | (Optional) The interval in milliseconds. Default: 500ms. |
32 |
33 |
34 | ### Return Value
35 |
36 |
37 | | Name | Type | Description |
38 | | -------------- | ---- | -------------------------------------------------------------- |
39 | | throttledValue | any | The throttled value that is updated at most once per interval. |
40 |
72 |
73 | );
74 | }
75 | ```
76 |
77 |
78 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useTimeout.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useTimeout
3 | experimental: true
4 | rank: 25
5 | tagline: Create delayed actions or timed events using useTimeout.
6 | sandboxId: usetimeout-7fcfr1
7 | previewHeight: 450px
8 | relatedHooks:
9 | - useinterval
10 | - useintervalwhen
11 | ---
12 |
13 | import CodePreview from "../../components/CodePreview.astro";
14 | import HookDescription from "../../components/HookDescription.astro";
15 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
16 |
17 |
18 | The useTimeout hook allows you to set up a timed callback in your components.
19 | The hook returns a function (handleClearInterval) that can be used to manually
20 | cancel or clear the timer if needed. This hook is beneficial for scenarios
21 | where delayed actions or timed events are required, such as implementing
22 | loading delays, animations, or auto-updating components.
23 |
24 |
25 |
26 | ### Parameters
27 |
28 |
29 | | Name | Type | Description |
30 | | ---- | -------- | ----------------------------------------------------------------- |
31 | | cb | function | The callback function to be executed after the specified timeout. |
32 | | ms | number | The duration of the timeout in milliseconds. |
33 |
34 |
35 | ### Return Value
36 |
37 |
38 | | Name | Type | Description |
39 | | ------------ | -------- | ------------------------------------------------------------------------- |
40 | | clearTimeout | function | A function to clear the timeout and cancel the execution of the callback. |
41 |
You have 1s to defuse (click) the bomb or it will explode
104 |
112 |
117 |
118 | );
119 | }
120 | ```
121 |
122 |
123 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useToggle.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useToggle
3 | rank: 34
4 | tagline: A hook to toggle a boolean value with useToggle.
5 | sandboxId: usetoggle-tcj48q
6 | previewHeight: 300px
7 | relatedHooks:
8 | - uselongpress
9 | ---
10 |
11 | import CodePreview from "../../components/CodePreview.astro";
12 | import HookDescription from "../../components/HookDescription.astro";
13 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
14 |
15 |
16 | Basically, what this hook does is that, it takes a parameter with value true
17 | or false and toggles that value to opposite. It’s useful when we want to take
18 | some action into its opposite action, for example: show and hide modal, show
19 | more/show less text, open/close side menu.
20 |
21 |
22 |
23 | ### Parameters
24 |
25 |
26 | | Name | Type | Description |
27 | | ------------ | ------- | ------------------------------------------------- |
28 | | initialValue | boolean | (Optional) The initial value of the toggle state. |
29 |
30 |
31 | ### Return Value
32 |
33 | The `useToggle` hook returns an array with the following elements:
34 |
35 |
36 | | Index | Type | Description |
37 | | ----- | -------- | --------------------------------------------- |
38 | | 0 | boolean | The current state of the toggle. |
39 | | 1 | function | A function to toggle the state of the toggle. |
40 |
41 |
42 |
43 |
47 |
48 |
49 |
50 | ```jsx
51 | import * as React from "react";
52 | import { useToggle } from "@uidotdev/usehooks";
53 |
54 | function ToggleDemo({ on, toggle }) {
55 | return (
56 |
77 |
80 |
83 |
86 |
89 |
90 |
91 | );
92 | }
93 | ```
94 |
95 |
96 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useVisibilityChange.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useVisibilityChange
3 | rank: 13
4 | tagline: Track document visibility and respond to changes with useVisibilityChange.
5 | sandboxId: usevisibilitychange-8yxnwy
6 | previewHeight: 200px
7 | relatedHooks:
8 | - useorientation
9 | - usenetworkstate
10 | - usemediaquery
11 | ---
12 |
13 | import CodePreview from "../../components/CodePreview.astro";
14 | import HookDescription from "../../components/HookDescription.astro";
15 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
16 |
17 |
18 | The useVisibilityChange hook is useful for tracking the visibility state of a
19 | document or web page. It allows you to easily detect when the document is
20 | visible or hidden, and perform certain actions based on that information. The
21 | hook returns a boolean value indicating whether the document is currently
22 | visible or not, allowing components to react accordingly and update their
23 | rendering or behavior based on the visibility state.
24 |
25 |
26 |
27 | ### Return Value
28 |
29 |
30 | | Name | Type | Description |
31 | | --------------- | ------- | --------------------------------------------------------------- |
32 | | documentVisible | boolean | `true` if the document is currently visible, `false` otherwise. |
33 |
61 |
62 | );
63 | }
64 | ```
65 |
66 |
67 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useWindowScroll.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useWindowScroll
3 | rank: 45
4 | tagline: Track and manipulate the scroll position of a web page with useWindowScroll.
5 | sandboxId: usewindowscroll-pdw6f9
6 | previewHeight: 600px
7 | relatedHooks:
8 | - usemeasure
9 | - usewindowsize
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useWindowScroll hook is useful for tracking and manipulating the scroll
18 | position of a web page within a React component. It allows you to easily
19 | access the current scroll coordinates (x and y) through the "state" object
20 | returned by the hook. Additionally, the hook provides a "scrollTo" function
21 | that can be used to programmatically scroll to a specific position on the
22 | page. This hook is helpful when building components that require dynamic
23 | behavior based on the scroll position, such as lazy-loading content, infinite
24 | scrolling, or implementing smooth scrolling animations.
25 |
26 |
27 |
28 | ### Return Value
29 |
30 | The `useWindowScroll` hook returns an array with two elements:
31 |
32 |
33 | | Name | Type | Description |
34 | | ---------- | -------- | ------------------------------------------------------------------------ |
35 | | `state` | object | An object representing the current window scroll position. |
36 | | `scrollTo` | function | A function that can be used to scroll the window to a specific position. |
37 |
;
76 | })}
77 |
81 |
82 | );
83 | }
84 | ```
85 |
86 |
87 |
--------------------------------------------------------------------------------
/usehooks.com/src/content/hooks/useWindowSize.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: useWindowSize
3 | rank: 3
4 | tagline: Track the dimensions of the browser window with useWindowSize.
5 | sandboxId: usewindowsize-vxk6xf
6 | previewHeight: 500px
7 | relatedHooks:
8 | - usemeasure
9 | - usewindowscroll
10 | ---
11 |
12 | import CodePreview from "../../components/CodePreview.astro";
13 | import HookDescription from "../../components/HookDescription.astro";
14 | import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
15 |
16 |
17 | The useWindowSize hook is a useful for retrieving and tracking the dimensions
18 | of the browser window within a React component. It attaches an event listener
19 | to the "resize" event, ensuring that the size is updated dynamically whenever
20 | the window is resized. The hook returns the "size" object, enabling components
21 | to access and utilize the window dimensions for various purposes, such as
22 | responsive layout adjustments, conditional rendering, or calculations based on
23 | the available space.
24 |
25 |
26 |
27 | ### Return Value
28 |
29 | The `useWindowSize` hook returns an object with the following properties:
30 |
31 |
32 | | Name | Type | Description |
33 | | ------ | ------ | -------------------------------------------- |
34 | | width | number | The current width of the window, in pixels. |
35 | | height | number | The current height of the window, in pixels. |
36 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/usehooks.com/src/components/LogoGithub.astro:
--------------------------------------------------------------------------------
1 | ---
2 | const { class: className } = Astro.props;
3 | ---
4 |
5 |
6 | 
7 |
8 |
9 |
--------------------------------------------------------------------------------
/usehooks.com/src/components/QueryGGBanner.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Button from "./Button.astro";
3 | import CountdownTimer from "./CountdownTimer";
4 | ---
5 |
6 |
33 |
34 |
139 |
--------------------------------------------------------------------------------
/usehooks.com/src/components/RelatedHook.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { getEntry } from "astro:content";
3 | import HookCard from "./search/HookCard";
4 |
5 | const { slug } = Astro.props;
6 | const relatedHook = await getEntry("hooks", slug);
7 | const { name, tagline } = relatedHook.data;
8 | ---
9 |
10 | 
28 | 
35 | 
10 |