https://github.com/dkershner6/use-map-as-state

React Hook to use a Map object as React State, with the same interface as normal Maps
https://github.com/dkershner6/use-map-as-state

hacktoberfest npm-package react react-hooks

Last synced: 18 days ago
JSON representation

React Hook to use a Map object as React State, with the same interface as normal Maps

• Host: GitHub
• URL: https://github.com/dkershner6/use-map-as-state
• Owner: dkershner6
• License: apache-2.0
• Created: 2020-07-06T02:25:36.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-05-28T00:04:22.000Z (6 months ago)
• Last Synced: 2024-05-28T09:33:27.081Z (6 months ago)
• Topics: hacktoberfest, npm-package, react, react-hooks
• Language: TypeScript
• Homepage:
• Size: 397 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# 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.

```typescript

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 
{theMap.get('header')}
;

};

```


## Draft Usage

Note: The `set` function returns the NEXT state, even if the render has not occurred yet.

```typescript

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.