Counter Example

A simple counter implementation showing basic Storken usage.

📦 View the complete example on GitHub:

Store Setup

// store.ts
import { create } from 'storken';

export const [useStorken] = create({
  initialValues: {
    counter: 0
  },
  
  // Optional: Add async setter for side effects
  setters: {
    counter: async (storken, value) => {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 100));
      console.log('Counter updated to:', value);
    }
  }
});

Component Implementation

// Counter.tsx
import { useStorken } from './store';

export function Counter() {
  const [count, setCount, resetCount, loading] = useStorken('counter', 0);

  return (
    <div className="p-6 border rounded-lg">
      <h2 className="text-2xl font-bold mb-4">
        Count: {loading ? '...' : count}
      </h2>
      
      <div className="flex gap-2">
        <button
          onClick={() => setCount(prev => prev - 1)}
          disabled={loading}
          className="px-4 py-2 bg-red-500 text-white rounded"
        >
          Decrement
        </button>
        
        <button
          onClick={() => setCount(prev => prev + 1)}
          disabled={loading}
          className="px-4 py-2 bg-green-500 text-white rounded"
        >
          Increment
        </button>
        
        <button
          onClick={resetCount}
          disabled={loading}
          className="px-4 py-2 bg-gray-500 text-white rounded"
        >
          Reset
        </button>
      </div>
      
      {loading && (
        <p className="mt-2 text-sm text-gray-500">Updating...</p>
      )}
    </div>
  );
}

Features Demonstrated

State Management: Simple counter state with increment/decrement
Loading States: Automatic loading state during async operations
Reset Functionality: Built-in reset to initial value
Async Side Effects: Console logging on state changes
TypeScript Support: Full type inference

Advanced Variations

With Step Size

const [useStorken] = create({
  initialValues: {
    counter: 0,
    stepSize: 1
  }
});

function Counter() {
  const [count, setCount] = useStorken('counter', 0);
  const [step] = useStorken('stepSize', 1);
  
  return (
    <button onClick={() => setCount(prev => prev + step)}>
      Increment by {step}
    </button>
  );
}

With Persistence

const [useStorken] = create({
  initialValues: {
    counter: parseInt(localStorage.getItem('counter') || '0')
  },
  
  setters: {
    counter: async (storken, value) => {
      localStorage.setItem('counter', value.toString());
    }
  }
});

✨ Try It Out

Copy this code into your project and see how simple state management can be with Storken!