Reactivity

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

Flash message

Idle

Set a message and watch it reset to empty after 2 seconds.

(empty — resets after 2s)

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

function 
function Component(): void
Component() {
  const 
const default$: any
default$ = 
import useObservable
useObservable("");
  const 
const message$: any
message$ = 
import useAutoReset
useAutoReset(
const default$: any
default$, { 
afterMs: number
afterMs: 2000 });

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

import { createAutoReset, observable } from "@usels/web";

function Component() {
  "use scope"
  const default$ = observable("");
  const message$ = createAutoReset(default$, { afterMs: 2000 });

  message$.set("Saved!");
  // After 2 seconds, resets to ""
}

Boolean flag auto-reset

Hook
Scope

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

function Component() {
  const default$ = useObservable(false);
  const showCopied$ = useAutoReset(default$, { afterMs: 1500 });

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

import { createAutoReset, observable } from "@usels/web";

function Component() {
  "use scope"
  const default$ = observable(false);
  const showCopied$ = createAutoReset(default$, { afterMs: 1500 });

  const handleCopy = () => {
    navigator.clipboard.writeText("text");
    showCopied$.set(true);
  };
}

Type

Parameters

Parameter	Type	Description
`source$`	`Observable<T>`	Source Observable providing the default/reset target value.
`options`	`AutoResetOptions` (optional)	Configuration options.

AutoResetOptions

Option	Type	Default	Description
`afterMs`	`number`	`1000`	Delay in milliseconds before auto-reset.

Returns

Observable<WidenPrimitive<T>>

A writable Observable that auto-resets to source$ value after the delay.

Source

View on GitHub