Skip to content
/ simte Public

A simple state management for JS applications without dependencies.

Notifications You must be signed in to change notification settings

mleralec/simte

Repository files navigation

A simple state management for JS applications without dependencies.

< 500 Bytes 🏋️ and Typescript friendly.

👀 Examples

🔧 Installation

With CDN

<script src="https://unpkg.com/[email protected]/dist/index.iife.js"></script>
const { createState } = simte

With NPM

yarn add simte
# OR
npm i simte
import { createState } from 'simte'

💻 Usage

// initialize the state
const state = createState({ counter: 0 })

// subscribe to updates
state.subscribe(state => console.log(`The state has changed: ${state}`))

// update the state
state.setState({ counter: 1 }) // will log `The state has changed: { counter: 1 }`

📕 API

createState(state)

Initialize the given state and return 4 methods:

  • getState
  • setState
  • subscribe
  • unsubscribe

.getState()

Return the current state

.setState(newState)

Update the current state with given parameter. This update will trigger listeners.

.subscribe(listener)

Setup a listener with given parameter. The listener should be a function who receive the new state. The subscribe method will return an id (used for unsubscribe).

.unsubscribe(id)

Unsubscribe a listener with his identifier.

Typescript

You can use your Type with Typescript. The return of the getState function, the parameter of the setState function, and the parameter of each listener will use this type.

type MyState = {
  counter: number
}

const state = createState<MyState>({ counter: 0 })

state.getState() // { counter: 0 } as MyState

state.setState({ counter: 1, newProperty: 'hello' }) // will throw "Argument of type '{ counter: number; newProperty: string; }' is not assignable to parameter of type 'MyState'."

About

A simple state management for JS applications without dependencies.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published