Stan-js

A lightweight and flexible state management library designed for use in React, React Native and even vanilla-js applications
GitHub
126
Created 10 months ago, last commit a month ago
5 contributors
258 commits
Stars added on GitHub, month by month
N/A
N/A
N/A
N/A
N/A
N/A
N/A
N/A
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
Stars added on GitHub, per day, on average
Yesterday
=
Last week
0.0
/day
Last month
0.0
/day
Package on NPM
stan-js
1.5.0
Monthly downloads on NPM
0
0
0
0
0
0
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
No dependencies
README

TypeScript React ReactNative platform - ssr MIT NPM Version NPM Downloads

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:

npm install stan-js
yarn add stan-js
pnpm add stan-js
bun add stan-js

Demos

React

Open in repo Open in StackBlitz

Astro + React

Open in repo Open in StackBlitz

Next.js SSR

Open in repo Open in StackBlitz

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.