{"id":22793070,"url":"https://github.com/kripod/react-typed-inputs","last_synced_at":"2025-07-28T14:06:19.439Z","repository":{"id":55786450,"uuid":"234971535","full_name":"kripod/react-typed-inputs","owner":"kripod","description":"Strongly typed input components for React.","archived":false,"fork":false,"pushed_at":"2020-12-12T05:54:28.000Z","size":1034,"stargazers_count":5,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-12T22:37:26.283Z","etag":null,"topics":["components","input","react","typescript"],"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/kripod.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-19T21:35:21.000Z","updated_at":"2020-12-12T23:25:04.000Z","dependencies_parsed_at":"2022-08-15T07:01:08.656Z","dependency_job_id":null,"html_url":"https://github.com/kripod/react-typed-inputs","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/kripod/react-typed-inputs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Freact-typed-inputs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Freact-typed-inputs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Freact-typed-inputs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Freact-typed-inputs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kripod","download_url":"https://codeload.github.com/kripod/react-typed-inputs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Freact-typed-inputs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267527835,"owners_count":24102019,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["components","input","react","typescript"],"created_at":"2024-12-12T03:17:52.943Z","updated_at":"2025-07-28T14:06:19.416Z","avatar_url":"https://github.com/kripod.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-typed-inputs\n\nStrongly typed input components for React.\n\n[![npm](https://img.shields.io/npm/v/react-typed-inputs)](https://www.npmjs.com/package/react-typed-inputs)\n[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/kripod/react-typed-inputs.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/kripod/react-typed-inputs/context:javascript)\n[![Travis (.com)](https://img.shields.io/travis/com/kripod/react-typed-inputs)](https://travis-ci.com/github/kripod/react-typed-inputs)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](https://commitizen.github.io/cz-cli/)\n\n## 💡 Motivation\n\nHTML form elements keep their internal state as strings. While the variable below retains its numeric type, it cannot be cleared by the user.\n\n```jsx\nimport { useState } from 'react';\n\nfunction Form() {\n  const [value, setValue] = useState(42);\n  return (\n    \u003cinput\n      type=\"number\"\n      value={value}\n      onChange={(event) =\u003e setValue(Number(event.currentTarget.value))}\n    /\u003e\n  );\n}\n```\n\nThis happens because the empty input value gets converted to `0` by `Number('')`. Checking for edge cases would make the code difficult to reason about.\n\nNew issues arise when introducing `null` for intentionally missing values (in place of `''` or `NaN`). Although a special `valueAsNumber` attribute exists, it does not support the culture-independent decimal point (`.`) in all browsers.\n\n_A [live demo](https://codesandbox.io/s/react-typed-inputs-demo-kkf27) is available for demonstrating the differences between prior approaches._\n\n## 📚 Usage\n\nImport one of the components as documented below.\n\n- Use `onValueChange` instead of `onChange`. (Behavior of the latter is kept intact in all cases.)\n- Controlled components accept `null` as their `value`, denoting an empty field.\n- Uncontrolled components support all the described behavioral additions.\n\nEnjoy the benefits of type annotations and tree shaking out of the box.\n\n### `\u003cNumericInput\u003e`\n\n```jsx\nimport { useState } from 'react';\nimport { NumericInput } from 'react-typed-inputs';\n\nfunction Form() {\n  const [value, setValue] = useState(42);\n  return \u003cNumericInput value={value} onValueChange={setValue} /\u003e;\n}\n```\n\n#### Props\n\n##### Overridable defaults\n\n- `type`: Equals `\"text\"`.\n  - Using `\"number\"` is [not recommended](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/).\n  - Typing a decimal point doesn’t nullify the value by default.\n- `inputMode`: Set to one of the following only when `min \u003e= 0`, as devices may not show a minus key (`-`).\n  - `\"numeric\"`: When `step` is an integer, which is true unless overrided.\n  - `\"decimal\"`: When `step` is not an integer.\n- `pattern`: Serves as a fallback for setting input mode in iOS Safari.\n\n##### Opt-in behavior\n\n- `clampAfterBlur`: Enforces range constraints (`min`, `max`) by adjusting `value` when the component loses focus.\n- `roundAfterBlur`: Enforces `step` constraint by adjusting `value` when the component loses focus.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkripod%2Freact-typed-inputs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkripod%2Freact-typed-inputs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkripod%2Freact-typed-inputs/lists"}