Quick Start
Get up and running with Storken in less than 5 minutes!
1. Create Your Store
Create a new file called store.ts:
import { create } from 'storken';
// Create your store with initial values
export const [useStorken, getStore, setStore] = create({
initialValues: {
counter: 0,
user: null,
todos: [] as string[]
}
});2. Use in Your Components
Now you can use your store in any React component:
import { useStorken } from './store';
function Counter() {
// Full API: [value, setter, reset, loading]
const [count, setCount, resetCount, loading] = useStorken('counter', 0);
return (
<div>
<h2>Count: {loading ? '...' : count}</h2>
<button onClick={() => setCount(prev => prev + 1)}>
Increment
</button>
<button onClick={() => setCount(prev => prev - 1)}>
Decrement
</button>
<button onClick={resetCount}>
Reset
</button>
</div>
);
}3. Async Operations
Storken supports async operations out of the box with loading states:
import { create } from 'storken';
export const [useStorken] = create({
initialValues: {
user: null
},
// Async getter - fetches data
getters: {
user: async () => {
const response = await fetch('/api/user');
return response.json();
}
},
// Async setter with side effects
setters: {
user: async (storken, value) => {
await fetch('/api/user', {
method: 'POST',
body: JSON.stringify(value)
});
console.log('User updated!');
}
}
});4. TypeScript Support
Storken provides full TypeScript support with type inference:
interface User {
id: string;
name: string;
email: string;
}
const [useStorken] = create({
initialValues: {
user: null as User | null,
isLoggedIn: false
}
});
// TypeScript knows the types!
function Profile() {
const [user, setUser] = useStorken('user', null);
// user is typed as User | null
if (!user) return <div>Please log in</div>;
return <div>Welcome, {user.name}!</div>;
}✅ That's it!
You now have a fully functional, type-safe state management system with async support and loading states!