useAutoReset

Observable that automatically resets to a default value after a specified delay. Useful for temporary state like toast messages, form feedback, or UI status indicators. Each time the value changes, the reset timer restarts.

Demo

(empty — resets after 2s)

Usage

import { 
import useAutoReset
useAutoReset } from "@usels/web";

const 
const message$: any
message$ = 
import useAutoReset
useAutoReset("", 2000);
const message$: any
message$.
any
set("Saved!");
// message$.get() returns "Saved!" immediately
// After 2 seconds, message$.get() returns "" automatically

import { 
function useObservable<T>(): Observable<T | undefined> (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#useObservable
useObservable } from "@legendapp/state/react";
import { 
import useAutoReset
useAutoReset } from "@usels/web";

// Reactive delay — changing afterMs$ restarts the pending timer
const 
const afterMs$: any
afterMs$ = 
useObservable<unknown>(value: Promise<unknown> | (() => unknown) | unknown, deps?: React.DependencyList): any (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#useObservable
useObservable(1000);
const 
const status$: any
status$ = 
import useAutoReset
useAutoReset("idle", 
const afterMs$: any
afterMs$);

const status$: any
status$.
any
set("loading");
// Resets to "idle" after 1000ms
// Changing afterMs$.set(3000) restarts the timer with the new delay

Boolean flag auto-reset

import { 
import useAutoReset
useAutoReset } from "@usels/web";

// Useful for brief UI feedback
const 
const showCopied$: any
showCopied$ = 
import useAutoReset
useAutoReset(false, 1500);

const 
const handleCopy: () => void
handleCopy = () => {
  
any
navigator.
any
clipboard.
any
writeText("text");
  
const showCopied$: any
showCopied$.
any
set(true);
  // Automatically resets to false after 1.5s
};

Type Declarations

export declare function useAutoReset<T>(defaultValue: MaybeObservable<T>, afterMs?: MaybeObservable<number>): Observable<WidenPrimitive<T>>;

Source

View on GitHub

Contributors

tigerwest

Changelog

a7392ab 2026-03-06 - feat(core,browser): add sync strategy hooks (tigerwest)