use-state-v2
v1.0.3
Published
`use-state-v2` simplifies React state management by providing reusable operations, reducing code duplication, and making your development process more efficient.
Downloads
5
Readme
use-state-v2
use-state-v2
simplifies React state management by providing reusable operations, reducing code duplication, and making your development process more efficient.
The useState
hook intelligently infers the data type from the initial value you provide and offers tailored operations for managing that specific type of state.
Table of Contents
Installation
npm install use-state-v2
Usage
Do
function App() {
const { filter, value } = useState([1, 2, 3, 10, 20, 30]);
return (
<div>
<button onClick={() => filter((value) => value >= 10)}></button>
</div>
);
}
instead of
function App() {
const [values, setValues] = useState([1, 2, 3, 10, 20, 30]);
return (
<div>
<button onClick={() => setValues(values.filter(value => value >= 10))}></button>
</div>
);
}
Data types
Common
The following common operations are available to all data types.
Set value
const { reset, set, value } = useState("Hello World");
set("Hello!");
console.log(value); // "Hello!"
Reset value
const { reset, set, value } = useState("Hello World");
set("Hello!");
console.log(value); // "Hello!"
reset();
console.log(value); // "Hello World"
String
Equivalent to common state management (please see above).
Number
Extends common state management operations with counter operations.
Decrement value
const { decrement, value } = useState(1);
decrement();
console.log(value); // 0
Increment value
const { increment, value } = useState(0);
increment();
console.log(value); // 1
Boolean
Extends common state management operations with toggle operations.
Set value to true
const { on, value } = useState(false);
on();
console.log(value); // true
Set value to false
const { off, value } = useState(true);
off();
console.log(value); // false
Toggle value on and off
const { toggle, value } = useState(true);
toggle();
console.log(value); // false
toggle();
console.log(value); // true
Array
Extends common state management operations with operations that easily add, remove, and update array items.
Add value
const { add, value } = useState([1, 2, 3]);
add(4);
console.log(value); // [1, 2, 3, 4]
Add values
const { add, value } = useState([1, 2, 3]);
add([4, 5]);
console.log(value); // [1, 2, 3, 4, 5]
Filter values
const { filter, value } = useState([0, 1, NaN, 2, 0, 3]);
filter((number) => number > 0);
console.log(value); // [1, 2, 3]
Insert value at index
const { insertAt, value } = useState([1, 2, 3]);
insertAt(0, 0);
console.log(value); // [0, 1, 2, 3]
Map values
const { map, value } = useState([1, 2, 3]);
map((value) => value * 2);
console.log(value); // [2, 4, 6]
Remove all occurrences value
const { remove, value } = useState([0, 0, 5, 5, 10, 10, 20, 20]);
remove(10);
console.log(value); // [0, 0, 5, 5, 20, 20]
Remove all occurrences values
const { remove, value } = useState([0, 0, 5, 5, 10, 10, 20, 20]);
remove([10, 20]);
console.log(value); // [0, 0, 5, 5]
Remove value at index
const { removeAt, value } = useState([1, 2, 3]);
removeAt(1);
console.log(value); // [1, 3]
TODO
Support for arrays of objects is being implemented.
Object
Extends common state management operations with operations that easily add, remove, and update object properties.
Add property
const { add, value } = useState<{ id: number; name: string; age?: number }>({
id: 123,
name: "John Doe",
});
add("age", 35);
console.log(value); // { id: 123, name: "John Doe", age: 35 }
Remove property
const { remove, value } = useState({ id: 123, name: "John Doe", age: 35 });
remove("age");
console.log(value); // { id: 123, name: "John Doe" }
Remove properties
const { remove, value } = useState({ id: 123, name: "John Doe", age: 35 });
remove(["age", "name"]);
console.log(value); // { id: 123 }
Update property
const { update, value } = useState({ id: 123, name: "John Doe", age: 35 });
update("age", 30);
console.log(value); // { age: 30 }
Get property
const { get, value } = useState({ id: 123, name: "John Doe", age: 35 });
get("id"); // 123
TODO
Support for nested properties is being implemented.