withReset

extension

Installation

npx jsrepo add github/reatom/reusables withReset

Copy the source code below and save it to the specified file path in your project.

with-reset.ts

import {
  action,
  type Action,
  type Atom,
  type AtomState,
  type Ext,
} from '@reatom/core'

/** Extension interface for withReset. */
export interface ResetExt<State> {
  /** Resets the atom to its initial value. */
  reset: Action<[], State>
}

/**
 * Atom extension that adds a `.reset()` action to restore the atom to its
 * initial value.
 *
 * @example
 *   const counter = atom(0, 'counter').extend(withReset(0))
 *   counter.set(10)
 *   counter.reset() // State is now 0
 *
 * @param initialValue - The value to reset to
 */
export const withReset =
  <Target extends Atom>(
    initialValue: AtomState<Target>,
  ): Ext<Target, ResetExt<AtomState<Target>>> =>
  (target) => ({
    reset: action(() => target.set(initialValue), `${target.name}.reset`),
  })

Documentation

withReset

Atom extension that adds a .reset() action to restore the atom to its initial value.

`withReset(initialValue)`

Adds a reset action that sets the atom back to the provided initial value.

Parameters

Parameter	Type	Description
`initialValue`	`State`	The value to reset to

Returns

Extension that adds:

Property	Type	Description
`reset`	`Action<[], State>`	Action that resets to initial value

Example

import { atom } from '@reatom/core'
import { withReset } from '#reatom/extension/with-reset'

const counter = atom(0, 'counter').extend(withReset(0))

counter.set(10)
console.log(counter()) // 10

counter.reset()
console.log(counter()) // 0

Form state example

interface FormState {
  username: string
  email: string
}

const initialState: FormState = { username: '', email: '' }

const formState = atom(initialState, 'formState').extend(
  withReset(initialState),
)

// User fills out form
formState.set({ username: 'john', email: 'john@example.com' })

// Clear form after submission
formState.reset()

Composing with other extensions

import { withReset } from '#reatom/extension/with-reset'
import { withLocalStorage } from '@reatom/core'

const settings = atom({ theme: 'light' }, 'settings')
  .extend(withReset({ theme: 'light' }))
  .extend(withLocalStorage('settings'))

// Reset clears to initial value (also updates localStorage)
settings.reset()

Example

import { atom, effect } from '@reatom/core'

import { withReset } from './with-reset'

// --- Basic counter with reset ---

const counter = atom(0, 'counter').extend(withReset(0))

counter.set(10)
console.log(counter()) // 10

counter.reset()
console.log(counter()) // 0

// --- Form state with reset ---

interface FormState {
  username: string
  email: string
  agreeToTerms: boolean
}

const initialFormState: FormState = {
  username: '',
  email: '',
  agreeToTerms: false,
}

const formState = atom(initialFormState, 'formState').extend(
  withReset(initialFormState),
)

// Simulate user filling out form
formState.set({
  username: 'johndoe',
  email: 'john@example.com',
  agreeToTerms: true,
})

// Clear form after submission
formState.reset()
console.log(formState()) // { username: '', email: '', agreeToTerms: false }

// --- Composing with other extensions ---

const settings = atom({ theme: 'light', fontSize: 14 }, 'settings').extend(
  withReset({ theme: 'light', fontSize: 14 }),
)

effect(() => {
  console.log('Settings changed:', settings())
})

settings.set({ theme: 'dark', fontSize: 16 })
settings.reset() // Logs: Settings changed: { theme: 'light', fontSize: 14 }