Overview
stan-js is a lightweight and flexible state management library designed for use in React, React Native and even vanilla-js applications. It simplifies the process of managing state in your application by providing a simple createStore function. This package aims to offer a straightforward solution for state management without the need for extensive type definitions or repetitive code.
Features
- ⚡️ Performance and minimal re-renders
- ✍️ Simple configuration
- ⚛️ Out of the box React integration
- 💾 Built in data persistence
- 🚀 Amazing typescript IntelliSense
- 🪝 Easy access to all store values
- 🪶 Very lightweight
- 🥳 No dependencies
- 🛡️ 100% Test coverage
Installation
Install package using preferred package manager:
npm install stan-js
yarn add stan-js
pnpm add stan-js
bun add stan-jsDemos
React
Astro + React
Next.js SSR
Getting Started
Create a store with initial state:
You can think of a store as your app state. You can define multiple keys/values, each key will create separated subscription (more explained here). If you want to persist the value - you can simply wrap it in Synchronizer
import { createStore } from 'stan-js'
import { storage } from 'stan-js/storage'
export const { useStore } = createStore({
count: 0,
get doubleCount() {
return this.count * 2
},
user: storage(''),
selectedLanguage: 'en-US',
unreadNotifications: [] as Array<Notification>
})Use the returned hook in your React component:
import { useStore } from './store'
const App = () => {
const { count, user, setCount } = useStore()
return (
<div>
<h1>Hello {user}!</h1>
<p>Count: {count}</p>
<button onClick={() => setCount(prev => prev + 1)}>Increment</button>
<button onClick={() => setCount(prev => prev - 1)}>Decrement</button>
</div>
)
}Check out our Docs for more information and examples.