https://github.com/unadlib/use-immutable
A hook for creating the immutable state with mutations on React
https://github.com/unadlib/use-immutable
Last synced: about 1 year ago
JSON representation
A hook for creating the immutable state with mutations on React
- Host: GitHub
- URL: https://github.com/unadlib/use-immutable
- Owner: unadlib
- License: mit
- Created: 2020-10-15T13:44:03.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-10-22T18:01:45.000Z (over 5 years ago)
- Last Synced: 2025-04-22T15:56:40.899Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 239 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-immutable
[](http://badge.fury.io/js/use-immutable)
A hook for creating the immutable state with mutations on React, it's based on [immer](https://github.com/immerjs/immer).
## Features
- Update state by mutating
- Snapshot
- Time traveling
## Usage
- Installation
```sh
yarn add use-immutable
```
- Example: [Demo](https://stackblitz.com/edit/use-immutable)
```js
import React from 'react';
import { useImmutable } from 'use-immutable';
const TodoList = () => {
const todo = useImmutable({
text: '',
list: [],
});
const updateText = (e) =>
todo.set(() => {
todo.state.text = e.target.value;
});
const addTodo = () =>
todo.set(() => {
todo.state.list.push(todo.state.text);
todo.state.text = '';
});
return (
Add
{todo.state.list.map((item, index) => (
- {item}
))}
);
};
```
## APIs
### instance.state
Get the current component status.
### instance.snapshot()
Take a snapshot of the current state
### instance.pop()
Update the state from the snapshot
### instance.clear()
Clear the snapshot
### instance.length
Get the snapshot length
### instance.index
Index of the current state in the snapshot
### instance.set()
Set a new state value