https://github.com/neon-x-hub/react-ledgex
A lightweight, key-value state management library for React with built-in undo/redo support
https://github.com/neon-x-hub/react-ledgex
react state time-travel undo-redo
Last synced: 3 months ago
JSON representation
A lightweight, key-value state management library for React with built-in undo/redo support
- Host: GitHub
- URL: https://github.com/neon-x-hub/react-ledgex
- Owner: neon-x-hub
- License: mit
- Created: 2025-07-24T03:57:01.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-07-24T04:43:10.000Z (3 months ago)
- Last Synced: 2025-07-24T07:48:36.517Z (3 months ago)
- Topics: react, state, time-travel, undo-redo
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-ledgex
- Size: 42 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Ledgex 🚀
**A lightweight, key-value state management library for React with built-in undo/redo support**
[](https://www.npmjs.com/package/react-ledgex)
[](https://opensource.org/licenses/MIT)
---
## ✨ Features
✅ **Simple Key-Value Store** – Like `useState` but global and type-safe
✅ **Time Travel** – Built-in undo/redo functionality
✅ **Layer Support** – Isolate state changes like Photoshop layers
✅ **Tiny Bundle** – < 5KB gzipped
✅ **React Optimized** – Seamless hooks integration
---
## 🚀 Installation
```bash
npm install react-ledgex
# or
yarn add react-ledgex
```
---
## 💡 Basic Usage
### 1. Wrap your app
```jsx
import { LedgexProvider } from 'react-ledgex';
function App() {
return (
);
}
```
### 2. Use anywhere
```jsx
import { useLedgex } from 'react-ledgex';
function Editor() {
const { set, get, undo, redo, getTimeInfo } = useLedgex();
const { canUndo, canRedo } = getTimeInfo();
const layer = get('background');
const handleEdit = () => {
set('background', { color: '#202020' });
};
return (
Undo
);
}
```
---
## 🎨 Advanced Features
### Layer Isolation
```js
// Separate state for UI vs document
ledger.set({
'ui/toolbar': { activeTool: 'brush' },
'document': { layers: [...] }
});
```
### Batch Updates
```js
ledger.set({
'canvas': { zoom: 1.2 },
'selection': { active: true }
}); // Single undo/redo point
```
### Efficient History
```js
// Configure memory usage
{/* Keeps last 100 states */}
```
### Don't Pay for empty tickets
Identical commits to the same layer won't count, thus won't affect the size of your storage.
---
## 🏆 Why Ledgex?
| Feature | Ledgex | Redux | Zustand |
|------------------|--------|-------|---------|
| Undo/Redo | ✅ Built-in | ❌ Middleware | ❌ Manual |
| Key-Value Store | ✅ Native | ❌ Actions | ✅ Native |
| Layer Support | ✅ Photoshop-style | ❌ | ❌ |
| Bundle Size | 3.81KB | 16KB | 8KB |
---
## 💖 Support
⭐ **Star the repo** if you find it useful!
🐞 **Report issues** on GitHub
---
```txt
// Made with ❤️ by Memmou Abderrahmane
```