A global state management library that is light and requires minimal boilerplate. OSM stands out for its ability to seamlessly access and update global states from both React and non-React environments.
npm install origami-state-manager
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.
---
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.
---
To install Origami-State-Manager, simply use npm:
``bash`
npm install origami-state-manager
---
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);
`
To make a store persistent, provide a unique store name as the second argument:
`javascript`
export const store = createStore(initialValues, "myOSMness");
---
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
`You can also update the state based on the current value:
`javascript
``---
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.
---
Contributions are highly appreciated! Please review the contribution guidelines for more details on how to get involved.
---
Stay updated on new releases and features by visiting the changelog, which is updated regularly.
---