Stan-js
A lightweight and flexible state management library designed for use in Rea...
README
stan-js
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:
- ```bash
- npm install stan-js
- yarn add stan-js
- pnpm add stan-js
- bun add stan-js
- ```
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
- ```typescript
- 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:
- ```typescript
- 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.