{"id":16439535,"url":"https://github.com/sevenoutman/react-use-set","last_synced_at":"2026-05-02T22:32:11.603Z","repository":{"id":183445506,"uuid":"629287022","full_name":"SevenOutman/react-use-set","owner":"SevenOutman","description":"Use Set-like API with React hook","archived":false,"fork":false,"pushed_at":"2023-04-18T05:44:14.000Z","size":60,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-08T12:11:09.090Z","etag":null,"topics":["react-hooks","reactjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SevenOutman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-04-18T02:29:21.000Z","updated_at":"2023-04-19T08:44:05.000Z","dependencies_parsed_at":"2023-07-24T14:50:32.934Z","dependency_job_id":null,"html_url":"https://github.com/SevenOutman/react-use-set","commit_stats":null,"previous_names":["sevenoutman/react-use-set"],"tags_count":1,"template":false,"template_full_name":"SevenOutman/ts-lib-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SevenOutman%2Freact-use-set","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SevenOutman%2Freact-use-set/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SevenOutman%2Freact-use-set/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SevenOutman%2Freact-use-set/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SevenOutman","download_url":"https://codeload.github.com/SevenOutman/react-use-set/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240757634,"owners_count":19852790,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-hooks","reactjs"],"created_at":"2024-10-11T09:09:38.861Z","updated_at":"2026-05-02T22:32:11.566Z","avatar_url":"https://github.com/SevenOutman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `react-use-set`\n\nUse [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)-like API with React hook.\n\n![npm](https://img.shields.io/npm/v/react-use-set)\n![CI Status](https://github.com/SevenOutman/react-use-set/actions/workflows/ci.yml/badge.svg)\n[![codecov](https://codecov.io/gh/SevenOutman/react-use-set/branch/main/graph/badge.svg?token=G6ymLbwxPj)](https://codecov.io/gh/SevenOutman/react-use-set)\n[![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)\n\n## Instsall\n\nInstall `react-use-set` npm package\n\n    npm i react-use-set\n\n## Usage\n\nGet a Set-like object from `useSet()` hook.ß\n\n```js\nimport { useSet } from \"react-use-set\"\n\nconst set = useSet()\n```\n\nIt's got some Set methods and properties like\n\n- `add` (enhanced)\n- `delete` (enhanced)\n- `clear`\n- `size`\n\nAlong with additional utils like\n\n- `toggle`\n- `sync`\n- `toArray`\n\nLearn more in [API](#api) section.\n\n## API\n\n### `set.add(...values)`\n\n\u003e Calling this method triggers a re-render.\n\nAdd values to the Set. Multiple values are supported.\n\n```js\nconst set = useSet([1, 2, 3])\n\nset.add(4) // Set [1, 2, 3, 4]\nset.add(5, 6) // Set [1, 2, 3, 4, 5, 6]\n```\n\n### `set.delete(...values)`\n\n\u003e Calling this method triggers a re-render.\n\nRemove values from the Set. Multiple values are supported.\n\n```js\nconst set = useSet([1, 2, 3])\n\nset.delete(1, 2) // Set [3]\n```\n\n### `set.has(value)`\n\nCheck whether a value exists in Set.\n\n```js\nconst set = useSet([1, 2, 3])\n\nset.has(1) // true\nset.has(4) // false\n```\n\n### `set.toggle(value)`\n\n\u003e Calling this method triggers a re-render.\n\nIf `value` exists in the Set, remove it, otherwise add it.\n\n```js\nconst set = useSet([1, 2, 3])\n\nset.toggle(2) // Set [1, 3]\nset.toggle(4) // Set [1, 3, 4]\n```\n\nThis is useful when you want to store selected options on a list.\n\n```jsx\nconst selectedValues = useSet()\n\noptions.map((option) =\u003e (\n  \u003cCheckbox onChange={() =\u003e selectedValues.toggle(option.value)} /\u003e\n))\n```\n\n### `set.clear()`\n\n\u003e Calling this method triggers a re-render.\n\nRemove all values from the Set.\n\n```js\nconst set = useSet([1, 2, 3])\n\nset.clear() // Set []\n```\n\n#### `set.size`\n\nReturn the number of values in the Set.\n\n```js\nconst set = useSet([1, 2, 3])\n\nset.size // 3\n```\n\n### `set.toArray()`\n\nReturn the values in the Set as an array.\n\n```js\nconst set = useSet([1, 2, 3])\n\nset.toArray() // [1, 2, 3]\n```\n\nThis is useful when you want to display a list of selected options.\n\n```jsx\n\u003col\u003e\n  Selected options ({selectedValues.size})}):\n  {selectedValues.toArray().map((value) =\u003e (\n    \u003cli key={value}\u003e{value}\u003c/li\u003e\n  ))}\n\u003c/ol\u003e\n```\n\n### `set.sync(values)`\n\n\u003e Calling this method triggers a re-render.\n\nReset the Set with the given values.\n\n```js\nconst set = useSet([1, 2, 3])\n\nset.sync([4, 5, 6]) // Set [4, 5, 6]\n```\n\n## License\n\nMIT \u0026copy; [Doma](https://github.com/SevenOutman)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsevenoutman%2Freact-use-set","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsevenoutman%2Freact-use-set","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsevenoutman%2Freact-use-set/lists"}