{"id":20196823,"url":"https://github.com/itsjonq/use-enhanced-state","last_synced_at":"2025-04-10T10:44:58.004Z","repository":{"id":74256017,"uuid":"288024661","full_name":"ItsJonQ/use-enhanced-state","owner":"ItsJonQ","description":"🔄  A collection of enhanced useState hooks for React.","archived":false,"fork":false,"pushed_at":"2021-01-04T19:27:37.000Z","size":253,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-18T15:46:46.566Z","etag":null,"topics":["hooks","react","state","use-state","usestate"],"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/ItsJonQ.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-16T21:09:19.000Z","updated_at":"2022-03-05T18:00:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"fdf7a17a-751f-4a26-b721-66ea7e49c3c5","html_url":"https://github.com/ItsJonQ/use-enhanced-state","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fuse-enhanced-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fuse-enhanced-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fuse-enhanced-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fuse-enhanced-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ItsJonQ","download_url":"https://codeload.github.com/ItsJonQ/use-enhanced-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248200892,"owners_count":21063992,"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":["hooks","react","state","use-state","usestate"],"created_at":"2024-11-14T04:26:12.754Z","updated_at":"2025-04-10T10:44:57.989Z","avatar_url":"https://github.com/ItsJonQ.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🔄 use-enhanced-state\n\n[![Build Status](https://travis-ci.org/ItsJonQ/use-enhanced-state.svg?branch=master)](https://travis-ci.org/ItsJonQ/use-enhanced-state)\n[![codecov](https://codecov.io/gh/ItsJonQ/use-enhanced-state/branch/master/graph/badge.svg)](https://codecov.io/gh/ItsJonQ/use-enhanced-state)\n[![Bundle size](https://badgen.net/bundlephobia/minzip/use-enhanced-state)](https://bundlephobia.com/result?p=use-enhanced-state)\n[![npm version](https://badge.fury.io/js/use-enhanced-state.svg)](https://badge.fury.io/js/use-enhanced-state)\n\n\u003e A collection of enhanced useState hooks for React.\n\n## Table of contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n-   [Installation](#installation)\n-   [Hooks](#hooks)\n    -   [useControlledState](#usecontrolledstate)\n    -   [useListState](#useliststate)\n    -   [useBoolState](#useboolstate)\n    -   [useLocalState](#uselocalstate)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\n```\nnpm install --save use-enhanced-state\n```\n\n## Hooks\n\n### useControlledState\n\nUsed to sync local component state and incoming state from props. This is useful for creating controlled components, like a custom `\u003cInput /\u003e`.\n\n```jsx\nimport React from 'react';\nimport { useControlledState } from 'use-enhanced-state';\n\nconst Control = ({ value: valueProp }) =\u003e {\n\tconst [value, setValue] = useControlledState(valueProp);\n\n\treturn \u003cInput value={value} onChange={setValue} /\u003e;\n};\n```\n\n##### useControlledState(initialState?: any, { initial?: any })\n\n`useControlledState` has options as a second argument. `initial` from options can be used to set the initial value for the internal controlled state.\n\n### useListState\n\nUsed for a **flat** array.\n\n```jsx\nimport React from 'react';\nimport { useListState } from 'use-enhanced-state';\n\nconst ListComponent = () =\u003e {\n\tconst [items, itemsFns] = useListState([{ id: 1 }, { id: 2 }]);\n\n\treturn (\n\t\t\u003cul\u003e\n\t\t\t{items.map((item) =\u003e (\n\t\t\t\t\u003cli key={item.id}\u003e{item.id}\u003c/li\u003e\n\t\t\t))}\n\t\t\u003c/ul\u003e\n\t);\n};\n```\n\n#### Methods\n\nThere are a handful of convenient methods provided by the second argument of `useListState()`.\n\n##### `.add(data)`\n\n_Alias: `.append()`_\n\nAdds a new item to the array (at the end).\n\n```js\nconst [items, itemsFns] = useListState([...]);\n\nitemsFns.add({ id: 'a' });\n```\n\n##### `.find({ at: number, id: any })`\n\n_Alias: `.get()`_\n\nFinds an item from the array, using either an index value (`at`) or an `id`.\n\n```js\nconst [items, itemsFns] = useListState([...]);\n\nitemsFns.find({ id: 'a' });\nitemsFns.find({ at: 9 });\n```\n\n##### `.has({ at: number, id: any })`\n\nChecks to see if the array contains an item.\n\n```js\nconst [items, itemsFns] = useListState([...]);\n\nitemsFns.has({ id: 'a' });\n```\n\n##### `.indexOf({ id: any })`\n\nChecks an index of an item based on an id.\n\n```js\nconst [items, itemsFns] = useListState([...]);\n\nitemsFns.indexOf({ id: 'a' });\n```\n\n##### `.insert({ at: number, item: any })`\n\nAdds new data an a specific index.\n\n```js\nconst [items, itemsFns] = useListState([...]);\n\nitemsFns.insert({at: 3, item: { id: 'a' }});\n```\n\n##### `.move(source: number, destination: number)`\n\nMoves an item from a previous index (`source`) to a new index (`destination`).\n\n```js\nconst [items, itemsFns] = useListState([...]);\n\nitemsFns.move(3, 5);\n```\n\n##### `.prepend(data)`\n\nAdds a new item to the array (at the start).\n\n```js\nconst [items, itemsFns] = useListState([...]);\n\nitemsFns.prepend({ id: 'a' });\n```\n\n##### `.remove({ at: number, id: any })`\n\nRemoves an item from the array, given an index value (`at`) or an `id`.\nAlternatively, a filter match (`function`) can be provided.\n\n```js\nconst [items, itemsFns] = useListState([...]);\n\nitemsFns.remove({ id: 'a' });\n// or\nitemsFns.remove((item) =\u003e item.id === 'a');\n```\n\n##### `.removeAll((item: any, index: number) =\u003e boolean)`\n\nRemoves all items from the array based on a filter match.\n\n```js\nconst [items, itemsFns] = useListState([...]);\n\nitemsFns.removeAll((item) =\u003e item.value \u003e 50);\n```\n\n##### `.set(Array | Function)`\n\n_Alias: `.setState()`_\n\nThe original React `setState` callback from `useState`.\n\n```js\nconst [items, itemsFns] = useListState([...]);\n\nitemsFns.set([{ id: 'a' }]);\n```\n\n##### `.update(Object)`\n\nUpdating an item based on an `id` match.\n\n```js\nconst [items, itemsFns] = useListState([...]);\n\nitemsFns.update({ id: 'a', title: 'b' });\n```\n\n### useBoolState\n\nUsed for a `boolean` state.\n\n```jsx\nimport React from 'react';\nimport { useListState } from 'use-enhanced-state';\n\nconst ListComponent = () =\u003e {\n\tconst [show, showData] = useBoolState(false);\n\n\treturn \u003cdiv\u003e{show ? 'Show' : 'Hide'}\u003c/div\u003e;\n};\n```\n\n#### Methods\n\nThere are a handful of convenient methods provided by the second argument of `useBoolState()`.\n\n##### `.true()`\n\n_Alias: `.truthy()`_\n\nSets the value to `true`.\n\n```js\nconst [value, valueFns] = useBoolState(false);\n\nvalueFns.true();\n```\n\n##### `.false()`\n\n_Alias: `.falsy()`_\n\nSets the value to `false`.\n\n```js\nconst [value, valueFns] = useBoolState(true);\n\nvalueFns.false();\n```\n\n##### `.toggle()`\n\nToggles the value between `true` and `false`.\n\n```js\nconst [value, valueFns] = useBoolState(true);\n\nvalueFns.toggle();\n```\n\n##### `.set(Array | Function)`\n\n_Alias: `.setState()`_\n\nThe original React `setState` callback from `useState`.\n\n```js\nconst [value, valueFns] = useBoolState(false);\n\nvalueFns.set(true);\n```\n\n### useLocalState\n\nUsed to read/write state to localStorage.\n\n```jsx\nimport React from 'react';\nimport { useListState } from 'use-enhanced-state';\n\nconst ListComponent = () =\u003e {\n\tconst [config, setConfig] = useLocalState('items', {...});\n\n\treturn (\n\t\t\u003cdiv\u003e{config.dark ? 'Dark' : 'Light'}\u003c/div\u003e\n\t);\n};\n```\n\n##### useLocalState(key: string, state: any)\n\nThe `key` will be used as the localState key for your data.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fuse-enhanced-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsjonq%2Fuse-enhanced-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fuse-enhanced-state/lists"}