Shadcn Hooks

useThrottleFn

A hook to throttle a function

Loading...

Installation

npx shadcn@latest add @shadcnhooks/use-throttle-fn

API

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<Fn extends (...args: any[]) => any>(
  fn: Fn,
  throttleMs?: number,
  options?: ThrottleOptions,
): {
  run: ThrottledFunction<(...args: Parameters<Fn>) => any>
  cancel: () => void
  flush: () => void
}

Credits

Last updated on

On this page