lostash v1.2.0

Lostash

A collection of enhanced useState that provides utility methods for common use cases.

Installation

# npm
npm install lostash

# yarn
yarn add lostash

# pnpm
pnpm add lostash

Usage Examples

useBoolState

Switch Example

Codesandbox

function Switch () {
  const onState = useBoolState();
  return (
    <button
      className={onState.isTrue ? "button-primary" : ""}
      onClick={onState.toggle}
    >
      {onState.isTrue ? "On" : "Off"}
    </button>
  );
};

useStringState

Text Input Example

import { useStringState } from "lostash";

function SearchBar() {
  const searchState = useStringState("");
  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchState.value}
        onChange={searchState.onChange}
      />
      <button onClick={searchState.clear}>Clear</button>
    </div>
  );
}

useNumberState

Counter Example

import { useNumberState } from "lostash";

function Counter() {
  const counterState = useNumberState(0);
  return (
    <div style={counterStyles}>
      <h2>Counter: {value}</h2>
      <button onClick={counterState.increment}>+1</button>
      <button onClick={counterState.decrement}>-1</button>
      <button onClick={counterState.reset}>Reset</button>
    </div>
  );
}

useArrayState

To-do List Example

import { useArrayState } from "lostash";

function TodoList() {
  const listState = useArrayState<Task>([
    { id: 1, text: "Buy groceries" },
    { id: 2, text: "Walk the dog" },
  ]);

  return (
    <div>
      <h2>To-Do List</h2>
      <ul>
        {listState.value.map((task) => (
          <li>
            {task.text}
            <button onClick={() => listState.remove(task)}>Delete</button>
          </li>
        ))}
      </ul>
      <button onClick={() => listState.push({ id: Date.now(), text: "New Task" })}>
        Add Task
      </button>
      <button onClick={listState.clear}>Clear All</button>
      <button onClick={listState.reset}>Reset</button>
    </div>
  );
}

API

useBoolState

Codesandbox

useBoolState<Props = {}>(
  initialValue?: boolean,
  options?: {
    props?: [K in keyof Props]: [Props[K], Props[K]];
  }
): UseBoolState