https://github.com/devmunro/otterlightstore
A beginner-friendly global state management library for React, inspired by Zustand.
https://github.com/devmunro/otterlightstore
beginner-friendly frontend hooks javascript library react state-management zustand
Last synced: 4 months ago
JSON representation
A beginner-friendly global state management library for React, inspired by Zustand.
- Host: GitHub
- URL: https://github.com/devmunro/otterlightstore
- Owner: devmunro
- License: mit
- Created: 2025-05-17T15:41:47.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-18T17:09:02.000Z (about 1 year ago)
- Last Synced: 2025-10-05T18:20:16.723Z (9 months ago)
- Topics: beginner-friendly, frontend, hooks, javascript, library, react, state-management, zustand
- Language: JavaScript
- Homepage:
- Size: 74.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# otterlightstore
----------------
A lightweight state management library for React using useSyncExternalStore. Provides simple APIs for managing global state with support for async states, object/array updates, and built-in devtools history.
- [Features](#features)
- [Installation](#installation)
- [How to use](#how-to-use)
- [Devtools](#devtools)
#Features
--------
* Simple, minimalistic API
* React hooks with selector support
* Async state handling built-in
* Helpers for toggling booleans, updating arrays/objects
* Devtools history & state restore
* No dependencies except React
#Installation
------------
`npm install otterlightstore `
or
`yarn add otterlightstore `
#How to start - Choose either 1a or 1b
-----
### 1a\. Initialize Starter Store File
Run this once to create a ready-to-use otter-store.js file in your current folder:
`npx otterlightstore-init`
This file includes:
* A basic store with example initial state
* Setup for your React components to use the store
* Example usage of helpers like toggling booleans and updating arrays
### 1b\. Create your store
```js
import { createStore } from "otterlightstore";
const initialState = {
count: 0,
todos: [],
loading: false,
};
export const store = createStore(initialState);
```
#How to use
---------
### 2\. Use the store in your components
```js
import React from "react";
import { store } from "./store";
function Counter() {
const count = store.useLightStore((state) => state.count);
const increment = () => {
store.set({ count: count + 1 }, "increment");
};
return (
Count: {count}
Increment
);
}
```
### 3\. Async state example
```js
async function fetchData() {
await store.asyncState("data", async () => {
const response = await fetch("https://api.example.com/data");
return response.json();
});
}
```
### 4\. Using helpers
```js
store.toggleBoolean("isOpen");
store.updateArray("todos", (arr) => [...arr, { id: 1, text: "Learn otterlightstore" }]);
store.deleteFromArray("todos", (todo) => todo.id === 1);
store.updateObject("user", { name: "Alice" });
store.deleteFromObject("user", "age");
````
#Devtools
--------
Store keeps a history (max 50). Use:
`const history = store.devtools.getHistory(); store.devtools.restoreState(0); `
API Reference
-------------
### createStore(initialState, options)
Creates a new store instance.
* initialState — Object, initial state
* options — Object, supports { enableLogging: boolean }
Returns:
* get() — current state
* set(partialState | updaterFn, actionName) — update state
* useLightStore(selector) — React hook for subscription and selection
* asyncState(key, asyncFn) — async state helper
* toggleBoolean(key) — toggle boolean state
* updateArray(key, updaterFn) — update array state
* deleteFromArray(key, predicate) — delete from array
* updateObject(key, partialUpdate) — partial object update
* deleteFromObject(key, prop) — delete object prop
* devtools — history and restore functions