{"id":13450690,"url":"https://github.com/d-asensio/use-controlled-input-number","last_synced_at":"2025-03-23T16:32:02.588Z","repository":{"id":43341060,"uuid":"282898201","full_name":"d-asensio/use-controlled-input-number","owner":"d-asensio","description":"React hook to turn numeric input behavior into pretty much what you expect","archived":false,"fork":false,"pushed_at":"2022-03-07T08:58:34.000Z","size":954,"stargazers_count":3,"open_issues_count":8,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-07-31T07:15:45.143Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/d-asensio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-27T12:56:10.000Z","updated_at":"2023-03-10T08:13:26.000Z","dependencies_parsed_at":"2022-09-21T00:53:06.990Z","dependency_job_id":null,"html_url":"https://github.com/d-asensio/use-controlled-input-number","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d-asensio%2Fuse-controlled-input-number","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d-asensio%2Fuse-controlled-input-number/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d-asensio%2Fuse-controlled-input-number/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d-asensio%2Fuse-controlled-input-number/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d-asensio","download_url":"https://codeload.github.com/d-asensio/use-controlled-input-number/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221856424,"owners_count":16892439,"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":[],"created_at":"2024-07-31T07:00:37.328Z","updated_at":"2024-10-28T16:31:46.684Z","avatar_url":"https://github.com/d-asensio.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"\n# use-controlled-input-number\n\n*React hook to turn numeric input behavior into pretty much what you expect*\n\n[![npm version](https://badge.fury.io/js/use-controlled-input-number.svg)](https://badge.fury.io/js/use-controlled-input-number)\n\nWhile it is not obvious at first glance, numeric inputs are not simple. Especially if you want to use the value that is typed in to calculate something, since **they return a string instead of a number**.\n\nThis hook is intended to solve this problem in the easiest possible way, giving you all the control over the input, but making it behave as you would expect (always returning a number).\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable border=\"0\" cellspacing=\"0\" cellpadding=\"0\"\u003e\n    \u003ctbody\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\n          \u003cimg\n            alt=\"Example without hook\"\n            src=\"assets/example-without-hook.gif\"\n          /\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n          \u003cimg\n            alt=\"Example with hook\"\n            src=\"assets/example-with-hook.gif\"\n          /\u003e\n        \u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n\u003e You can find these examples in [codesandbox](https://codesandbox.io/s/example-1-d0fny?file=/src/App.js)\n\n## Installation\n\n```bash\nyarn add use-controlled-input-number\n```\n\n## Usage\n\nThis is an example of use for this hook:\n\n```javascript\nfunction ControlledInput () {\n  const [value, setValue] = useState(1)\n\n  const inputProps = useControlledInputNumber({\n    value, // The value will always be of type number\n    onChange: setValue\n  })\n\n  return (\n    \u003cinput type='number' {...inputProps} /\u003e\n  )\n}\n```\n\n## Related projects\n\n- [use_stepper](https://github.com/wKovacs64/use-stepper): If you want a hook that fully controls the behavior of the input.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd-asensio%2Fuse-controlled-input-number","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd-asensio%2Fuse-controlled-input-number","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd-asensio%2Fuse-controlled-input-number/lists"}