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 rerenders
• ✍️ Simple configuration
• ⚛️ Out of the box React intergration
• 🚀 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-js

Demos

React

Astro + React

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 doubleCounter() {
        return this.counter * 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.