Introducing Origami-State-Manager (OSM): A Lightweight State Management Library with Minimal Boilerplate

A.Zahir Rajput — Tue, 27 Aug 2024 08:39:28 +0000

Managing global state in JavaScript applications, especially when you need it accessible across both React and non-React contexts, can be challenging. Existing libraries often involve heavy setup, unnecessary complexity, and are tightly coupled with React. But what if you could manage state with the elegance and simplicity of paper folding? Enter Origami-State-Manager (OSM).

What is OSM?

Origami-State-Manager (OSM), pronounced "awesome," is a lightweight state management library designed to be simple, flexible, and scalable. Inspired by the Japanese art of Origami, which transforms a plain sheet of paper into intricate designs, OSM enables you to manage your application’s global state with the same elegance. Just like paper, it’s incredibly lightweight, making it perfect for applications where simplicity and performance matter.

Why OSM?

The journey to building OSM started as a search for a solution that could:

Minimize Boilerplate: State management should be straightforward and require as little setup as possible.
Be Versatile: Work seamlessly in both React and non-React contexts.
Stay Lightweight: Avoid bloating your bundle with unnecessary code.
Remain Flexible and Scalable: Adapt effortlessly to different project needs while maintaining performance.

If you’re tired of over-engineered solutions and want something that just works, OSM might be the "awesome" tool you need.

Key Features

Minimal Setup: Quickly define and manage your global state with a clean, intuitive API.
React and Non-React Compatibility: States can be accessed and updated from both React components and plain JavaScript functions.
Lightweight: As light as paper, OSM keeps your app fast and responsive.
Persistence Options: Make your states persistent with a simple configuration.

Getting Started with OSM

Ready to add some OSM-ness to your app? Here’s how to get started:

1. Install the Library:

npm install origami-state-manager

2. Create a Store:

A store is where all your global states live. Setting one up is as easy as passing your initial state values to createStore:

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

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

export const store = createStore(initialValues);

You can also make the store persistent by providing a store name:

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

3. Access and Update State:

For React components, use the useStateListener hook to access and update state:

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

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

  return (
    <button onClick={() => store["origami"].value = new Date().getSeconds()}>
      Origami Count: {origami}
    </button>
  );
}

4. Access State in Non-React Functions:

You can easily work with state outside React as well:

// utils.js

function getProfile() {
  let profile = store["profile"].value;
  if (!profile) {
    store["profile"].value = {};
  }

  return store["profile"].value;
}

Use Cases

OSM is perfect for scenarios where:

You need a lightweight solution for simple global state management.
Your project involves both React and non-React logic that must share global state.
You want to avoid the complexity of larger libraries like Redux or MobX.

Caution: A Few Oopsies Ahead!

OSM is still in its early stages and has not been fully tested in all environments. While it’s ideal for smaller projects and straightforward state needs, it’s advisable to be cautious when using it in complex scenarios. If you do encounter any issues, please report them so the library can continue to improve.

Contributing to OSM

Interested in helping make OSM even more awesome? Contributions are welcome! Check out the contribution guidelines to get started.

Stay Updated

The changelog is regularly updated with all new changes and improvements.

Final Thoughts

Origami-State-Manager (OSM) aims to provide a simple yet powerful solution to global state management without the bloat. By keeping the setup minimal and the performance high, OSM enables you to focus on building features rather than wrestling with state complexity.

Try it out, and experience a new level of OSM-ness in your projects!

Get started with OSM today: npm: origami-state-manager

DEV Community: A.Zahir Rajput