```
## Credits
* [use-latest](https://github.com/Andarist/use-latest)
# hooks: useLockFn
URL: /docs/hooks/use-lock-fn
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-lock-fn/index.mdx
A hook to lock a function until the previous promise is resolved
***
title: useLockFn
description: A hook to lock a function until the previous promise is resolved
-----------------------------------------------------------------------------
## Installation
Copy and paste the following code into your project.
## API
```ts
/**
* A hook to lock a function until the previous promise is resolved
* @param fn - The function to lock
* @returns The locked function
*/
export function useLockFn(
fn: (...args: P) => Promise,
): (...args: P) => Promise
```
# hooks: useMcp
URL: /docs/hooks/use-mcp
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-mcp/index.mdx
A hook to get the latest value of a variable
***
title: useMcp
description: A hook to get the latest value of a variable
---------------------------------------------------------
* [use-mcp](https://github.com/modelcontextprotocol/use-mcp)
Copy and paste the following code into your project.
# hooks: useMemoizedFn
URL: /docs/hooks/use-memoized-fn
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-memoized-fn/index.mdx
A hook to declare a memoized function
***
title: useMemoizedFn
description: A hook to declare a memoized function
--------------------------------------------------
## Installation
Copy and paste the following code into your project.
## API
```ts
type noop = (this: any, ...args: any[]) => any
type PickFunction = (
this: ThisParameterType,
...args: Parameters
) => ReturnType
/**
* A hook to declare a memoized function
* @param fn - The function to declare as a memoized function
* @returns The memoized function
*/
export function useMemoizedFn(fn: T): PickFunction
```
## Credits
* [use-memoized-fn](https://ahooks.js.org/hooks/use-memoized-fn)
# hooks: useMount
URL: /docs/hooks/use-mount
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-mount/index.mdx
A hook to run a function when the component mounts
***
title: useMount
description: A hook to run a function when the component mounts
---------------------------------------------------------------
## Installation
Copy and paste the following code into your project.
## API
```ts
type MountCallback = EffectCallback | (() => Promise void)>)
/**
* A hook to run a function when the component mounts
* @param fn - The function to run when the component mounts
* @returns The function to run when the component mounts
*/
export function useMount(fn: MountCallback): void
```
## Credits
* [use-mount](https://ahooks.js.org/hooks/use-mount)
# hooks: useMouse
URL: /docs/hooks/use-mouse
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-mouse/index.mdx
A hook to track mouse position with optional touch support
***
title: useMouse
description: A hook to track mouse position with optional touch support
-----------------------------------------------------------------------
import { Demo01 } from './demo/demo-01'
## Installation
Copy and paste the following code into your project.
## API
```ts
export type UseMouseCoordType = 'page' | 'client' | 'screen' | 'movement'
export type UseMouseSourceType = 'mouse' | 'touch' | null
export interface UseMouseInitialValue {
x: number
y: number
}
export interface UseMouseState extends UseMouseInitialValue {
sourceType: UseMouseSourceType
}
export interface UseMouseOptions {
type?: UseMouseCoordType
touch?: boolean
resetOnTouchEnds?: boolean
initialValue?: UseMouseInitialValue
window?: Window
}
/**
* Reactive mouse position with optional touch support.
*/
export function useMouse(options?: UseMouseOptions): UseMouseState
```
## Credits
* [useMouse](https://vueuse.org/core/useMouse/)
# hooks: useNetwork
URL: /docs/hooks/use-network
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-network/index.mdx
A hook to get the network state
***
title: useNetwork
description: A hook to get the network state
--------------------------------------------
import { Demo01 } from './demo/demo-01'
## Installation
Copy and paste the following code into your project.
## API
```ts
/**
* @see https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation
* The network state
*/
export interface NetworkState {
/**
* The date when the network state was last updated
*/
since?: Date
/**
* Whether the network is online
*/
online?: boolean
/**
* The round-trip time in milliseconds
*/
rtt?: number
/**
* The type of the network
*/
type?: string
/**
* The downlink speed in Mbps
*/
downlink?: number
/**
* Whether the user has enabled data saving
*/
saveData?: boolean
/**
* The maximum downlink speed in Mbps
*/
downlinkMax?: number
/**
* The effective type of the network
*/
effectiveType?: string
}
/**
* A hook to get the network state
* @returns The network state
*/
export function useNetwork(): NetworkState
```
## Credits
* [use-network](https://ahooks.js.org/hooks/use-network)
# hooks: useOs
URL: /docs/hooks/use-os
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-os/index.mdx
A hook to detect the current operating system
***
title: useOs
description: A hook to detect the current operating system
----------------------------------------------------------
import { Demo01 } from './demo/demo-01'
## Installation
Copy and paste the following code into your project.
## API
```ts
export type UseOSReturnValue =
| 'undetermined'
| 'macos'
| 'ios'
| 'windows'
| 'android'
| 'linux'
| 'chromeos'
export interface UseOsOptions {
/**
* Defer browser OS detection until after mount to avoid server/client mismatches.
* @default true
*/
getValueInEffect?: boolean
}
/**
* Detect the current operating system from the browser environment.
*
* @param options Hook options.
* @returns The detected operating system or `undetermined`.
*/
export function getOS(options?: UseOsOptions): UseOSReturnValue
/**
* Reactively detect the current operating system from `navigator.userAgent`.
*
* @param options Hook options.
* @returns The detected operating system or `undetermined`.
*/
export function useOs(options?: UseOsOptions): UseOSReturnValue
```
## Credits
* [use-os](https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/hooks/src/use-os/use-os.ts)
# hooks: usePrevious
URL: /docs/hooks/use-previous
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-previous/index.mdx
A hook to get the previous value of a variable
***
title: usePrevious
description: A hook to get the previous value of a variable
-----------------------------------------------------------
import { Demo01 } from './demo/demo-01'
## Installation
Copy and paste the following code into your project.
## API
```ts
export type ShouldUpdateFunc = (prev?: T, next?: T) => boolean
const defaultShouldUpdate = (a?: T, b?: T) => !Object.is(a, b)
/**
* A hook to get the previous value of a state
* @param state - The state to get the previous value of
* @param shouldUpdate - The function to determine if the state should be updated
* @returns The previous value of the state
*/
export function usePrevious(
state: T,
shouldUpdate?: ShouldUpdateFunc,
): T | undefined
```
## Credits
* [use-previous](https://ahooks.js.org/hooks/use-previous)
# hooks: useResetState
URL: /docs/hooks/use-reset-state
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-reset-state/index.mdx
A hook to reset a state
***
title: useResetState
description: A hook to reset a state
------------------------------------
import { Demo01 } from './demo/demo-01'
## Installation
Copy and paste the following code into your project.
## API
```ts
type ResetState = () => void
/**
* A hook to reset a state
* @param initialState - The initial state
*/
export function useResetState(
initialState: S | (() => S),
): readonly [S, Dispatch>, ResetState]
```
## Credits
* [use-reset-state](https://ahooks.js.org/hooks/use-reset-state)
# hooks: useQuery
URL: /docs/hooks/use-query
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-query/index.mdx
useQuery is a hook that allows you to fetch data from an API and cache the results.
***
title: useQuery
description: useQuery is a hook that allows you to fetch data from an API and cache the results.
------------------------------------------------------------------------------------------------
## Installation
* [use-query](https://github.com/TanStack/query)
Copy and paste the following code into your project.
# hooks: useScrollLock
URL: /docs/hooks/use-scroll-lock
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-scroll-lock/index.mdx
A hook to lock the scroll of the body
***
title: useScrollLock
description: A hook to lock the scroll of the body
--------------------------------------------------
import { Demo01 } from './demo/demo-01'
## Installation
Copy and paste the following code into your project.
## API
```ts
interface UseScrollLockOptions {
autoLock?: boolean
lockTarget?: HTMLElement | string
widthReflow?: boolean
}
interface UseScrollLockReturn {
isLocked: boolean
lock: () => void
unlock: () => void
}
/**
* A hook to lock the scroll of the body
* @param options - The options for the hook
* @param options.autoLock - Whether to automatically lock the scroll when the component is mounted
* @param options.lockTarget - The target element to lock the scroll on
* @param options.widthReflow - Whether to reflow the width of the body when the scroll is locked
* @returns The scroll lock state and the functions to lock and unlock the scroll
*/
function useScrollLock(options?: UseScrollLockOptions): UseScrollLockReturn
```
## Credits
* [use-scroll-lock](https://usehooks-ts.com/react-hook/use-scroll-lock)
# hooks: useStickToBottom
URL: /docs/hooks/use-stick-to-bottom
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-stick-to-bottom/index.mdx
A lightweight React Hook intended mainly for AI chat applications, for smoothly sticking to bottom of messages
***
title: useStickToBottom
description: A lightweight React Hook intended mainly for AI chat applications, for smoothly sticking to bottom of messages
---------------------------------------------------------------------------------------------------------------------------
## Installation
* [use-stick-to-bottom](https://github.com/stackblitz-labs/use-stick-to-bottom)
Copy and paste the following code into your project.
# hooks: useSWR
URL: /docs/hooks/use-swr
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-swr/index.mdx
A hook to get the latest value of a variable
***
title: useSWR
description: A hook to get the latest value of a variable
---------------------------------------------------------
## Installation
* [use-swr](https://github.com/vercel/swr)
Copy and paste the following code into your project.
# hooks: useTextSelection
URL: /docs/hooks/use-text-selection
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-text-selection/index.mdx
A hook to get the text selection and its bounding rect from an element
***
title: useTextSelection
description: A hook to get the text selection and its bounding rect from an element
-----------------------------------------------------------------------------------
import { Demo01 } from './demo/demo-01'
## Installation
Copy and paste the following code into your project.
## API
```ts
interface Rect {
top: number
left: number
bottom: number
right: number
height: number
width: number
}
export interface State extends Rect {
text: string
}
/**
* A hook to get the text selection from an element
* @param target - The target to get the text selection from
*/
export function useTextSelection(
target?: BasicTarget,
): State
```
## Credits
* [use-text-selection](https://ahooks.js.org/hooks/use-text-selection)
# hooks: useThrottle
URL: /docs/hooks/use-throttle
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-throttle/index.mdx
A hook to throttle a value
***
title: useThrottle
description: A hook to throttle a value
---------------------------------------
import { Demo01 } from './demo/demo-01'
## Installation
Copy and paste the following code into your project.
## API
```ts
interface ThrottleOptions {
/**
* An optional AbortSignal to cancel the throttled function.
*/
signal?: AbortSignal
/**
* An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
* If `edges` includes "leading", the function will be invoked at the start of the delay period.
* If `edges` includes "trailing", the function will be invoked at the end of the delay period.
* If both "leading" and "trailing" are included, the function will be invoked at both the start and end of the delay period.
* @default ["leading", "trailing"]
*/
edges?: Array<'leading' | 'trailing'>
}
/**
* A hook to throttle a value
* @param value - The value to throttle
* @param throttleMs - The throttle time in milliseconds default to 1000
* @param options - The options for the throttle value
* @returns The throttled value
*/
function useThrottle(
value: T,
throttleMs?: number,
options?: ThrottleOptions,
): T
```
## Credits
* [use-throttle](https://ahooks.js.org/hooks/use-throttle)
# hooks: useThrottleEffect
URL: /docs/hooks/use-throttle-effect
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-throttle-effect/index.mdx
A hook to throttle an effect
***
title: useThrottleEffect
description: A hook to throttle an effect
-----------------------------------------
import { Demo01 } from './demo/demo-01'
## Installation
Copy and paste the following code into your project.
## API
```ts
interface ThrottleOptions {
/**
* An optional AbortSignal to cancel the throttled function.
*/
signal?: AbortSignal
/**
* An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
* If `edges` includes "leading", the function will be invoked at the start of the delay period.
* If `edges` includes "trailing", the function will be invoked at the end of the delay period.
* If both "leading" and "trailing" are included, the function will be invoked at both the start and end of the delay period.
* @default ["leading", "trailing"]
*/
edges?: Array<'leading' | 'trailing'>
}
/**
/**
* A hook to throttle an effect
* @param effect - The effect to throttle
* @param deps - The dependencies for the effect
* @param throttleMs - The throttle time in milliseconds default to 1000
* @param options - The options for the throttle value
* @returns The throttled effect
*/
function useThrottleEffect(
effect: EffectCallback,
deps: DependencyList,
throttleMs?: number,
options?: ThrottleOptions,
): void
```
## Credits
* [use-throttle-effect](https://ahooks.js.org/hooks/use-throttle-effect)
# hooks: useThrottleFn
URL: /docs/hooks/use-throttle-fn
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-throttle-fn/index.mdx
A hook to throttle a function
***
title: useThrottleFn
description: A hook to throttle a function
------------------------------------------
import { Demo01 } from './demo/demo-01'
## Installation
Copy and paste the following code into your project.
## API
```ts
interface ThrottleOptions {
/**
* An optional AbortSignal to cancel the throttled function.
*/
signal?: AbortSignal
/**
* An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
* If `edges` includes "leading", the function will be invoked at the start of the delay period.
* If `edges` includes "trailing", the function will be invoked at the end of the delay period.
* If both "leading" and "trailing" are included, the function will be invoked at both the start and end of the delay period.
* @default ["leading", "trailing"]
*/
edges?: Array<'leading' | 'trailing'>
}
/**
* A hook to throttle a function
* @param fn - The function to throttle
* @param throttleMs - The throttle time in milliseconds default to 1000
* @param options - The options for the throttle function
* @returns The throttled function
*/
function useThrottleFn any>(
fn: Fn,
throttleMs?: number,
options?: ThrottleOptions,
): {
run: ThrottledFunction<(...args: Parameters) => any>
cancel: () => void
flush: () => void
}
```
## Credits
* [use-throttle-fn](https://ahooks.js.org/hooks/use-throttle-fn)
# hooks: useTimeout
URL: /docs/hooks/use-timeout
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-timeout/index.mdx
A hook that creates a timeout.
***
title: useTimeout
description: A hook that creates a timeout.
-------------------------------------------
import { Demo01 } from './demo/demo-01'
## Installation
Copy and paste the following code into your project.
## API
```ts
/**
* A hook that creates a timeout.
* @param fn - The function to execute after the timeout
* @param delay - The delay in milliseconds before the function is executed
* @returns A function to clear the timeout
*/
export function useTimeout(fn: () => void, delay: number = 0): () => void
```
## Credits
* [use-timeout](https://ahooks.js.org/hooks/use-timeout)
# hooks: useTitle
URL: /docs/hooks/use-title
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-title/index.mdx
A hook to reactively manage document.title
***
title: useTitle
description: A hook to reactively manage document.title
-------------------------------------------------------
import { Demo01 } from './demo/demo-01'
## Installation
Copy and paste the following code into your project.
## API
```ts
export interface UseTitleOptions {
/**
* Observe external changes to `document.title`.
* @default false
*/
observe?: boolean
/**
* Optional template for the final browser title.
* Use `%s` as the placeholder when providing a string template.
*/
titleTemplate?: string | ((title: string) => string)
}
/**
* Reactively read and update `document.title`.
*
* @param newTitle Optional initial/controlled title value.
* @param options Hook options.
*/
export function useTitle(
newTitle?: string | null,
options?: UseTitleOptions,
): readonly [string, Dispatch>]
```
## Credits
* [useTitle](https://github.com/vueuse/vueuse/blob/main/packages/core/useTitle/index.ts)
# hooks: useToggle
URL: /docs/hooks/use-toggle
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-toggle/index.mdx
A hook to toggle a value
***
title: useToggle
description: A hook to toggle a value
-------------------------------------
## Installation
Copy and paste the following code into your project.
## API
```ts
/**
* A hook to toggle a value
* @param defaultValue - The default value of the value
* @param reverseValue - The reverse value of the value
* @returns The value and the actions to toggle the value
*/
function useToggle(): [boolean, Actions]
function useToggle(defaultValue: T): [T, Actions]
function useToggle(
defaultValue: T,
reverseValue: U,
): [T | U, Actions]
```
## Credits
* [use-toggle](https://github.com/Andarist/use-toggle)
# hooks: useUnmount
URL: /docs/hooks/use-unmount
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-unmount/index.mdx
A hook to run a function when the component unmounts
***
title: useUnmount
description: A hook to run a function when the component unmounts
-----------------------------------------------------------------
## Installation
Copy and paste the following code into your project.
## API
```ts
/**
* A hook to run a function when the component unmounts
* @param fn - The function to run when the component unmounts
* @returns The function to run when the component unmounts
*/
export function useUnmount(fn: () => void): void
```
## Credits
* [use-unmount](https://ahooks.js.org/hooks/use-unmount)
# hooks: useUpdateEffect
URL: /docs/hooks/use-update-effect
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-update-effect/index.mdx
A hook to run an effect only when the component updates
***
title: useUpdateEffect
description: A hook to run an effect only when the component updates
--------------------------------------------------------------------
## Installation
Copy and paste the following code into your project.
## API
```ts
/**
* A hook to run an effect only when the component updates
* @param effect - The effect to run
* @param deps - The dependencies to run the effect on
*/
export function useUpdateEffect(
effect: EffectCallback,
deps: DependencyList,
): void
```
## Credits
* [use-update-effect](https://ahooks.js.org/hooks/use-update-effect)
# hooks: useUpdate
URL: /docs/hooks/use-update
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-update/index.mdx
A hook to force a component to re-render
***
title: useUpdate
description: A hook to force a component to re-render
-----------------------------------------------------
import { Demo01 } from './demo/demo-01'
## Installation
Copy and paste the following code into your project.
## API
```ts
/**
* A hook to force a component to re-render
* @returns A function to force a component to re-render
*/
export function useUpdate(): () => void
```
## Credits
* [use-update](https://ahooks.js.org/hooks/use-update)
# hooks: useWhyDidYouUpdate
URL: /docs/hooks/use-why-did-you-update
Source: https://raw.githubusercontent.com/Debbl/shadcn-hooks/refs/heads/main/src/registry/hooks/use-why-did-you-update/index.mdx
A hook to log the props that changed in a component
***
title: useWhyDidYouUpdate
description: A hook to log the props that changed in a component
----------------------------------------------------------------
import { Demo01 } from './demo/demo-01'
## Installation
Copy and paste the following code into your project.
## API
```ts
/**
* A hook to log the props that changed in a component
* @param componentName - The name of the component
* @param props - The props that changed in the component
*/
export function useWhyDidYouUpdate(componentName: string, props: IProps): void
```
## Credits
* [use-why-did-you-update](https://ahooks.js.org/hooks/use-why-did-you-update)