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

React Hook to use a native JS Set as State, maintaining the interface entirely, and properly handling re-rendering. Uses Immer under the hood.
https://github.com/dkershner6/use-set-as-state

hacktoberfest npm-package react react-hooks

Last synced: 29 days ago
JSON representation

React Hook to use a native JS Set as State, maintaining the interface entirely, and properly handling re-rendering. Uses Immer under the hood.

• Host: GitHub
• URL: https://github.com/dkershner6/use-set-as-state
• Owner: dkershner6
• License: apache-2.0
• Created: 2020-07-24T17:57:58.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-04-14T00:20:10.000Z (7 months ago)
• Last Synced: 2024-04-14T14:30:23.943Z (7 months ago)
• Topics: hacktoberfest, npm-package, react, react-hooks
• Language: TypeScript
• Homepage:
• Size: 395 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# useSetAsState

A React Hook to use JavaScript's Set 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.

## Docs

[API Docs](https://dkershner6.github.io/use-set-as-state/)

## Installation

```

npm i use-set-as-state immer

```

## Usage

```typescript

import { useSetAsState } from 'use-set-as-state';

const FunctionComponent = () => {

    const theSet = useSetAsState(new Set());

    const onClick = () => {

        theSet.add('checkboxChecked');

    };

    return ;

};

```

Note: The `add` function returns the NEXT (Draft) state, even if the render has not occurred yet.

```typescript

const onClick = () => {

    const draft = theSet.add('header');

    console.log(draft.has('header')); // true

};

```

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