useIdle

Hook that defines the logic when the user is idle

sensorslowtest coverage

siberiacancodeOnline

Stop moving the mouse and keyboard for a moment to switch to the idle state.

import { useIdle } from '@siberiacancode/reactuse';

import { cn } from '@/utils/lib';

const IDLE_TIMEOUT = 2500;

const Demo = () => {
  const { idle } = useIdle(IDLE_TIMEOUT);

  return (
    <section className='flex flex-col items-center gap-4 p-4'>
      <div className='border-border bg-background inline-flex w-fit items-center gap-3 rounded-full border px-3 py-2'>
        <div className='relative shrink-0'>
          <div className='flex size-9 items-center justify-center rounded-full bg-gradient-to-br from-neutral-700 to-neutral-900 text-sm font-semibold text-white'>
            SC
          </div>
          <span
            className={cn(
              'ring-background absolute right-0 bottom-0 block size-2.5 rounded-full ring-2 transition-colors',
              idle ? 'bg-amber-500' : 'bg-green-500'
            )}
          />
        </div>

        <div className='flex flex-col items-start gap-0.5 leading-none'>
          <span className='text-foreground text-sm font-medium'>siberiacancode</span>
          <span className='text-muted-foreground text-xs'>{idle ? 'Away' : 'Online'}</span>
        </div>
      </div>

      <p className='text-muted-foreground max-w-[220px] text-center text-[10px] leading-relaxed'>
        Stop moving the mouse and keyboard for a moment to switch to the idle state.
      </p>
    </section>
  );
};

export default Demo;

Installation

pnpm add @siberiacancode/reactuse

Usage

const { idle, lastActive } = useIdle();
// or
const { idle, lastActive } = useIdle(1000, (idle) => console.log(idle));
// or
const { idle, lastActive } = useIdle(1000, { onChange: (idle) => console.log(idle) });

Type Declarations

export type UseIdleCallback = (idle: boolean) => void;

export interface UseIdleOptions {
  /** The idle events */
  events?: Array<keyof DocumentEventMap>;
  /** The idle state */
  initialValue?: boolean;
  /** The callback to execute when idle state changes */
  onChange?: UseIdleCallback;
}

export interface UseIdleReturn {
  /** The idle state */
  idle: boolean;
  /** The last active time */
  lastActive: number;
}

export interface UseIdle {
  (): UseIdleReturn;

  (milliseconds: number, callback: UseIdleCallback): UseIdleReturn;

  (milliseconds: number, options?: UseIdleOptions): UseIdleReturn;
}

API

Returns

UseIdleReturn

Parameters

Name	Type	Default	Note
milliseconds	number	ONE_MINUTE	The idle time in milliseconds
callback	(idle: boolean) => void	-	The callback to execute when idle state changes

Returns

UseIdleReturn

Parameters

Name	Type	Default	Note
milliseconds	number	ONE_MINUTE	The idle time in milliseconds
options.onChange	(idle: boolean) => void	-	The callback to execute when idle state changes
options.initialValue	boolean	false	The options for the hook
options.events	Array<keyof WindowEventMap>	IDLE_EVENTS

Returns

UseIdleReturn

Contributors

ddebabinhhywax

Last updated on

useHotkeys useInfiniteScroll