npm install executor-fn

---

## 🖊 Advanced Example: Mini Text Editor

You can even use `Executor` to power a text editor with full undo/redo:

```jsx
import React, { useState } from "react";
import Executor from "executor-fn";

export default function TextEditorApp() {
  const editor = Executor((_, newValue) => newValue, {
    storeHistory: true,
    callNow: true,
    initialArgs: [""],
  });

  const [text, setText] = useState(editor.value);
  const updateUI = () => setText(editor.value);

  return (
    <div>
      <textarea
        rows="4"
        cols="40"
        value={text}
        onChange={(e) => {
          editor(editor.value, e.target.value);
          updateUI();
        }}
      />
      <button onClick={() => { editor.undo(); updateUI(); }}>Undo</button>
      <button onClick={() => { editor.redo(); updateUI(); }}>Redo</button>
      <button onClick={() => { editor.reset(); updateUI(); }}>Reset</button>
      <pre>{JSON.stringify(editor.history, null, 2)}</pre>
    </div>
  );
}

📄 **Full example: examples/text-editor.jsx**

## React Todo App Example

Here’s a full-featured React app using `Executor` as a global store
(with undo/redo support out-of-the-box):

- Multiple components share the same `todosStore`.
- Undo/Redo history is automatic — no boilerplate!
- No Redux, no Zustand — just one function.

📂 **See full code in [`examples/react-todo-app`](./examples/react-todo-app)**

---

[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/martino-kevo/executor-fn/tree/main/demo)

> 🎮 **Try executor-fn live in your browser!**

## 🔥 React Hook Support (`useExecutor`)

You can now bind an `Executor` instance directly to your React components without manually forcing re-renders.

```jsx
import React from "react";
import Executor, { useExecutor } from "executor-fn";

const counterStore = Executor((count, delta) => count + delta, {
  storeHistory: true,
  callNow: true,
  initialArgs: [0],
});

export default function CounterApp() {
  const count = useExecutor(counterStore); // Auto-updates on state change

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => counterStore(counterStore.value, 1)}>➕</button>
      <button onClick={() => counterStore(counterStore.value, -1)}>➖</button>
      <button onClick={counterStore.undo}>⏪ Undo</button>
      <button onClick={counterStore.redo}>⏩ Redo</button>
    </div>
  );
}



>>>>>>> c428633 (Initial commit: executor-fn)