Stan-js

A lightweight and flexible state management library designed for use in Rea...

State managementReact
codemask-labs/stan-jscodemask-labs.github.io/stan-js/stan-js

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:

  1. ```bash
  2. npm install stan-js
  3. yarn add stan-js
  4. pnpm add stan-js
  5. bun add stan-js
  6. ```

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

  1. ```typescript
  2. import { createStore } from 'stan-js'
  3. import { storage } from 'stan-js/storage'

  5. export const { useStore } = createStore({
  6.     count: 0,
  7.     get doubleCount() {
  8.         return this.count * 2
  9.     },
  10.     user: storage(''),
  11.     selectedLanguage: 'en-US',
  12.     unreadNotifications: [] as Array<Notification>
  13. })
  14. ```

Use the returned hook in your React component:

  1. ```typescript
  2. import { useStore } from './store'

  4. const App = () => {
  5.     const { count, user, setCount } = useStore()

  7.     return (
  8.         <div>
  9.             <h1>Hello {user}!</h1>
  10.             <p>Count: {count}</p>
  11.             <button onClick={() => setCount(prev => prev + 1)}>Increment</button>
  12.             <button onClick={() => setCount(prev => prev - 1)}>Decrement</button>
  13.         </div>
  14.     )
  15. }
  16. ```

Check out our Docs for more information and examples.