https://codemask-labs.github.io/stan-js/
https://codemask-labs.github.io/stan-js/
context intellisense react rerenders state store typescript
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://codemask-labs.github.io/stan-js/
- Owner: codemask-labs
- License: mit
- Created: 2023-12-15T15:24:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-06T07:53:53.000Z (7 months ago)
- Last Synced: 2024-09-19T09:56:15.961Z (7 months ago)
- Topics: context, intellisense, react, rerenders, state, store, typescript
- Language: TypeScript
- Homepage: https://codemask-labs.github.io/stan-js/
- Size: 27.2 MB
- Stars: 126
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- React-Toolkit - Stan Js - js apps (🧰 React Toolkit / State Management)
README
[](https://typescriptlang.org)
[](https://react.dev/)
[](https://reactnative.dev/)
[](https://nextjs.org/)
[](https://mit-license.org/)
[](https://www.npmjs.com/package/stan-js)
[](https://www.npmjs.com/package/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
```
## Demos
##### React
[](https://github.com/codemask-labs/stan-js/tree/main/examples/react)
[](https://stackblitz.com/github/codemask-labs/stan-js/tree/main/examples/react)
##### Astro + React
[](https://github.com/codemask-labs/stan-js/tree/main/examples/astro)
[](https://stackblitz.com/github/codemask-labs/stan-js/tree/main/examples/astro)
##### Next.js SSR
[](https://github.com/codemask-labs/stan-js/tree/main/examples/nextjs)
[](https://stackblitz.com/github/codemask-labs/stan-js/tree/main/examples/nextjs)
## 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](https://codemask-labs.github.io/stan-js/reference/createstore/#usestore)). If you want to persist the value - you can simply wrap it in [Synchronizer](https://codemask-labs.github.io/stan-js/reference/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
})
```
Use the returned hook in your React component:
```typescript
import { useStore } from './store'
const App = () => {
const { count, user, setCount } = useStore()
return (
Hello {user}!
Count: {count}
setCount(prev => prev + 1)}>Increment
setCount(prev => prev - 1)}>Decrement
)
}
```
Check out our [Docs](https://codemask-labs.github.io/stan-js/) for more information and examples.