use-map-as-state v1.3.1
useMapAsState
A React Hook to use JavaScript's Map as React State, using an identical interface. Uses Immer under the hood.
This is a very lightweight package, it only depends on one other, extremely lightweight React hook (besides Immer itself).
Total package size is ~3KB including TypeScript types.
Installation
npm i use-map-as-state immer
Usage
You interact with the Map exactly as you would a normal map, but all of the render safety and immutability is handled for you.
import { useMapAsState } from 'use-map-as-state';
const FunctionComponent = () => {
const theMap = useMapAsState(new Map([['header', 'Not clicked.']]));
const handleHeaderClick = () => {
theMap.set('header', 'You clicked me.');
};
return <h1 onClick={handleHeaderClick}>{theMap.get('header')}</h1>;
};
Draft Usage
Note: The set
function returns the NEXT state, even if the render has not occurred yet.
const onClick = () => {
console.log(theMap.get('header')); // Whatever the previous value was
const draft = theMap.set('header', 'TestHeader);
console.log(theMap.get('header')); // STILL whatever the previous value was
console.log(draft.get('header')); // TestHeader
}
Contributing
All contributions are welcome, please open an issue or pull request.
To use this repository:
1. npm i -g pnpm
(if don't have pnpm installed)
2. pnpm i
3. npx projen
(this will ensure everything is setup correctly, and you can run this command at any time)
4. Good to make your changes!
5. You can run npx projen build
at any time to build the project.