State Management
useMapState
About
A react hook to manage state in a key value pair map.
Examples
import "./styles.css";
import { useMapState } from "rooks";
import { useState } from "react";
export default function App() {
const [
map,
{ set, setMultiple, has, remove, removeMultiple, removeAll },
] = useMapState({ a: 1, b: 2 });
const [setInputKey, setSetInputKey] = useState("");
const [setInputValue, setSetInputValue] = useState("");
const [removeInputKey, setRemoveInputKey] = useState("");
return (
<div className="App">
<h1>useMapState CodeSandbox</h1>
<div className="input">
<input
value={setInputKey}
onChange={e => setSetInputKey(e.target.value)}
placeholder="key"
/>
<input
value={setInputValue}
onChange={e => setSetInputValue(e.target.value)}
placeholder="value"
/>
<button onClick={() => set(setInputKey, setInputValue)}>set</button>
</div>
<div className="input">
<input
value={removeInputKey}
onChange={e => setRemoveInputKey(e.target.value)}
placeholder="key"
/>
<button onClick={() => remove(removeInputKey)}>remove</button>
</div>
{Object.entries(map).map(item => {
return <div>{item.join(": ")}</div>;
})}
</div>
);
}Arguments
| Argument value | Type | Description | Defualt |
|---|---|---|---|
| initialValue | Object | Initial value of the map | undefined |
Returns
Returns an array of following items:
| Return value | Type | Description |
|---|---|---|
| map | any | value of the map |
| methods | Object | methods to modify the map, see the table below |
map methods:
| Return value | Type | Description |
|---|---|---|
| set | (key: any, value: any) => void | set a key value pair in map |
| has | (key: any) => boolean | if key exists in map |
| setMultiple | (...keys: any[]) => void | set multiple key value pair in map |
| remove | (key: any) => void | remove a key value pair in map |
| removeMultiple | (...keys: any[]) => void | remove multiple key value pair in map |
| removeAll | () => void | remove all key value pair in map |