https://github.com/codemask-labs/stan-js

https://github.com/codemask-labs/stan-js

context intellisense react rerenders state store typescript

Last synced: 5 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/codemask-labs/stan-js
• Owner: codemask-labs
• License: mit
• Created: 2023-12-15T15:24:22.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-06T07:53:53.000Z (4 months ago)
• Last Synced: 2024-09-19T09:56:15.961Z (3 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

README

        
[![TypeScript](https://img.shields.io/badge/typescript-%230276C7?style=for-the-badge&logo=typescript&logoColor=%23fff&link=https%3A%2F%2Fwww.typescriptlang.org%2F)](https://typescriptlang.org)

[![React](https://img.shields.io/badge/react-%23077EA4?style=for-the-badge&logo=react&logoColor=%23fff&link=https%3A%2F%2Freact.dev%2F)](https://react.dev/)

[![ReactNative](https://img.shields.io/badge/react%20native-%23282C34?style=for-the-badge&logo=react&logoColor=%2360DAFB&link=https%3A%2F%2Freact.dev%2F)](https://reactnative.dev/)

[![platform - ssr](https://img.shields.io/badge/SSR-black?style=for-the-badge&logo=next.js&logoColor=white)](https://nextjs.org/)

[![MIT](https://img.shields.io/npm/l/%40codemaskinc%2Fstore?style=for-the-badge)](https://mit-license.org/)

[![NPM Version](https://img.shields.io/npm/v/stan-js?style=for-the-badge&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fstan-js)](https://www.npmjs.com/package/stan-js)

[![NPM Downloads](https://img.shields.io/npm/dw/stan-js?style=for-the-badge&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fstan-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

[![Open in repo](https://img.shields.io/badge/github-pages?style=for-the-badge&logo=github&logoColor=white&color=black

)](https://github.com/codemask-labs/stan-js/tree/main/examples/react)

[![Open in StackBlitz](https://img.shields.io/badge/Stackblitz-fff?style=for-the-badge&logo=stackblitz&logoColor=white&labelColor=%231374EF&color=%231374EF

)](https://stackblitz.com/github/codemask-labs/stan-js/tree/main/examples/react)

##### Astro + React

[![Open in repo](https://img.shields.io/badge/github-pages?style=for-the-badge&logo=github&logoColor=white&color=black

)](https://github.com/codemask-labs/stan-js/tree/main/examples/astro)

[![Open in StackBlitz](https://img.shields.io/badge/Stackblitz-fff?style=for-the-badge&logo=stackblitz&logoColor=white&labelColor=%231374EF&color=%231374EF

)](https://stackblitz.com/github/codemask-labs/stan-js/tree/main/examples/astro)

##### Next.js SSR

[![Open in repo](https://img.shields.io/badge/github-pages?style=for-the-badge&logo=github&logoColor=white&color=black

)](https://github.com/codemask-labs/stan-js/tree/main/examples/nextjs)

[![Open in StackBlitz](https://img.shields.io/badge/Stackblitz-fff?style=for-the-badge&logo=stackblitz&logoColor=white&labelColor=%231374EF&color=%231374EF

)](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.