🚀 Overview

@typepurify/react-state brings the zero-schema sanitization engine directly into your React component tree. It provides a suite of deeply-typed, ultra-lightweight hooks to replace heavy alternatives like React Hook Form or TanStack Query for simpler projects.

📦 Installation

npm install @typepurify/react-state typepurify

🛠 Features & Usage

1. usePurifiedState

A direct replacement for useState that automatically deep-cleans the initial state and any subsequent updates via the typepurify core engine.

import { usePurifiedState } from '@typepurify/react-state';

function ProfileForm() {
  // 'null' and undefined are automatically stripped
  const [state, setState, resetState] = usePurifiedState(
    { name: 'Alice', age: null },
    { stripEmptyStrings: true },
  );

  // Output: { name: "Alice" }
  // Restore the initial state (v0.5.11 🚀)
  resetState();
}

2. useSmartForm

A tiny alternative to React Hook Form that gives you easy registration, values, error handling, and submission state.

import { useSmartForm } from '@typepurify/react-state';

function ContactForm() {
  const { register, handleSubmit, errors, isSubmitting, reset } = useSmartForm({ email: '' });

  const onSubmit = async (data) => {
    await api.post('/contact', data);
    reset(); // Reset form values and errors (v0.5.11 🚀)
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} />
      {errors.email && <span>{errors.email}</span>}
      <button disabled={isSubmitting}>Send</button>
    </form>
  );
}

3. useApiQuery

A tiny alternative to TanStack Query for basic data fetching.

import { useApiQuery } from '@typepurify/react-state';

function Dashboard() {
  const { data, isLoading, error, refetch } = useApiQuery(() =>
    fetch('/api/data').then((r) => r.json()),
  );

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return <div>{JSON.stringify(data)}</div>;
}

4. Utility Hooks

• useLoading(): Universal loading state manager for async functions.
• useDebounce(value, delay): Simple debounce for text inputs.
• useLocalStorage(key, initialValue): Persists your state in browser storage while maintaining perfect types.

5. useToggle

A simple hook to manage boolean state intuitively.

import { useToggle } from '@typepurify/react-state';

function Modal() {
  const [isOpen, toggle, setOpen] = useToggle(false);

  return (
    <>
      <button onClick={toggle}>Toggle Modal</button>
      {isOpen && <div>Modal Content</div>}
    </>
  );
}

🆕 New in v0.5.8

useUndoRedoState<T>(initial) — Undo / Redo State

Full undo/redo history stack with cursor navigation.

import { useUndoRedoState } from '@typepurify/react-state';

const { current, set, undo, redo, canUndo, canRedo } = useUndoRedoState(0);
set(1);
set(2);
undo(); // current => 1
redo(); // current => 2

useImmerDraft<T>(initialState) — Immer-Like Draft

Apply mutable draft mutations to deeply cloned immutable state.

import { useImmerDraft } from '@typepurify/react-state';

const [state, updateDraft] = useImmerDraft({ user: { count: 0 } });
updateDraft((draft) => {
  draft.user.count = 5;
});
// state.user.count => 5

🛡️ License

MIT © Vallarasu Kanthasamy

📋 Changelog

v0.5.4 — Latest

New Features:

• createLeaderElectionNode(channelName?) — Multi-tab browser leader election utility. Allows one tab to claim leadership for coordinating shared state, broadcasting, or background jobs.

import { createLeaderElectionNode } from '@typepurify/react-state';

const node = createLeaderElectionNode('my-app');
node.claimLeader();
if (node.isLeader()) {
  console.log('This tab is the leader — start sync');
}
node.releaseLeader();

Bug Fixes:

• Fixed untracked read errors in createSignalStore.get() that could cause stale state returns in concurrent updates.

v0.5.1

• Added useToggle hook for boolean state management.
• Added useBooleanState with setTrue, setFalse, toggle helpers.
• Added useArray for array state manipulation.

0.5.8 Updates

Includes new features.