Origami-State-Manager (OSM)

Origami-State-Manager (OSM) (pronounced _"awesome"_) is a lightweight, flexible, and simple state management library designed to work seamlessly in both React and non-React environments with minimal boilerplate.

Jump to:

- Motivation for the development of OSM.

---

Why the Name “Origami”?

Origami is the Japanese art of paper folding, where a simple sheet of paper transforms into complex designs. Similarly, OSM is flexible, scalable, and lightweight, enabling developers to easily shape and manage global state in their applications.

---

Installation

To install Origami-State-Manager, simply use npm:

``bash
npm install origami-state-manager
`

---

Creating a Store

A store in OSM holds your global states. To create one, pass the initial states to the createStore method:

`javascript
// store.ts
import { createStore } from "origami-state-manager";

const initialValues = {
origami: 0,
osmness: 0,
};

export const store = createStore(initialValues);
`

$3

To make a store persistent, provide a unique store name as the second argument:

`javascript
export const store = createStore(initialValues, "myOSMness");
`

---

Usage

$3

The useStateListener hook allows you to access and listen to state changes within your React components:

`javascript
import { useStateListener } from "origami-state-manager";
import { store } from "./store";

function ExampleComponent() {
const origami = useStateListener("origami", store);
return

;
}
`

For accessing deeply nested properties, use dot notation:

`javascript
const deepOrigami = useStateListener("level1.level2.deepOrigami", store);
`

$3

OSM supports state access in non-React environments using stateValue:

`javascript
const count = stateValue("count", store);
`

For deeply nested states:

`javascript
const deepCount = stateValue("level1.level2.deepCount", store);
`

$3

Use stateValue to update the state by passing an updater function as the third argument:

`javascript
0)}>Reset
`

You can also update the state based on the current value:

`javascript
prev + 1)}>
Increment

``

---

Motivation

OSM was developed with the goal of creating a simple, lightweight global state management solution with minimal setup. It allows for effortless state management across React and non-React functions, making it suitable for applications that need an uncomplicated and efficient state management system.

---

Contributing to Origami-State-Manager

Contributions are highly appreciated! Please review the contribution guidelines for more details on how to get involved.

---

Changelog

Stay updated on new releases and features by visiting the changelog, which is updated regularly.

---