Reactivity

useManualReset

Observable with a manual reset() function that restores the value to its default. Unlike useAutoReset, the value is only reset when you explicitly call reset().

Demo

Editable field

Type anything, then press Reset to restore the initial value.

hello

Usage

Hook
Scope

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

function 
function Component(): void
Component() {
  const 
const default$: any
default$ = 
import useObservable
useObservable("hello");
  const { 
const value$: any
value$, 
const reset: any
reset } = 
import useManualReset
useManualReset(
const default$: any
default$);

  
const value$: any
value$.
any
set("changed");
  // value$.get() returns "changed"

  
const reset: any
reset();
  // value$.get() returns "hello" — restored to default
}

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

function Component() {
  "use scope"
  const default$ = observable("hello");
  const { value$, reset } = createManualReset(default$);

  value$.set("changed");
  reset();
  // value$.get() returns "hello"
}

Dynamic default value

Hook
Scope

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

function Component() {
  const default$ = useObservable("initial");
  const { value$, reset } = useManualReset(default$);

  value$.set("changed");
  default$.set("updated-default");
  reset();
  // value$.get() returns "updated-default" — reads current source value
}

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

function Component() {
  "use scope"
  const default$ = observable("initial");
  const { value$, reset } = createManualReset(default$);

  value$.set("changed");
  default$.set("updated-default");
  reset();
  // value$.get() returns "updated-default"
}

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

function Component() {
  const emptyStr$ = useObservable("");
  const { value$: name$, reset: resetName } = useManualReset(emptyStr$);
  const { value$: email$, reset: resetEmail } = useManualReset(emptyStr$);

  const handleSubmit = () => {
    // submit form...
    resetName();
    resetEmail();
  };
}

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

function Component() {
  "use scope"
  const emptyStr$ = observable("");
  const { value$: name$, reset: resetName } = createManualReset(emptyStr$);
  const { value$: email$, reset: resetEmail } = createManualReset(emptyStr$);

  const handleSubmit = () => {
    resetName();
    resetEmail();
  };
}

Type

Parameters

Parameter	Type	Description
`source$`	`Observable<T>`	- Observable holding the default/reset target value.

Returns

{ value$: Observable<WidenPrimitive<T>>; reset: Fn; }

Name	Type	Description
`value$`	`Observable<WidenPrimitive<T>>`	-
`reset`	`Fn`	-

Source

View on GitHub