https://github.com/kripod/react-typed-inputs
Strongly typed input components for React.
https://github.com/kripod/react-typed-inputs
components input react typescript
Last synced: 11 months ago
JSON representation
Strongly typed input components for React.
- Host: GitHub
- URL: https://github.com/kripod/react-typed-inputs
- Owner: kripod
- License: mit
- Created: 2020-01-19T21:35:21.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-12-12T05:54:28.000Z (over 5 years ago)
- Last Synced: 2025-07-12T22:37:26.283Z (11 months ago)
- Topics: components, input, react, typescript
- Language: TypeScript
- Homepage:
- Size: 1010 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-typed-inputs
Strongly typed input components for React.
[](https://www.npmjs.com/package/react-typed-inputs)
[](https://lgtm.com/projects/g/kripod/react-typed-inputs/context:javascript)
[](https://travis-ci.com/github/kripod/react-typed-inputs)
[](https://commitizen.github.io/cz-cli/)
## 💡 Motivation
HTML form elements keep their internal state as strings. While the variable below retains its numeric type, it cannot be cleared by the user.
```jsx
import { useState } from 'react';
function Form() {
const [value, setValue] = useState(42);
return (
setValue(Number(event.currentTarget.value))}
/>
);
}
```
This happens because the empty input value gets converted to `0` by `Number('')`. Checking for edge cases would make the code difficult to reason about.
New 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.
_A [live demo](https://codesandbox.io/s/react-typed-inputs-demo-kkf27) is available for demonstrating the differences between prior approaches._
## 📚 Usage
Import one of the components as documented below.
- Use `onValueChange` instead of `onChange`. (Behavior of the latter is kept intact in all cases.)
- Controlled components accept `null` as their `value`, denoting an empty field.
- Uncontrolled components support all the described behavioral additions.
Enjoy the benefits of type annotations and tree shaking out of the box.
### ``
```jsx
import { useState } from 'react';
import { NumericInput } from 'react-typed-inputs';
function Form() {
const [value, setValue] = useState(42);
return ;
}
```
#### Props
##### Overridable defaults
- `type`: Equals `"text"`.
- 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/).
- Typing a decimal point doesn’t nullify the value by default.
- `inputMode`: Set to one of the following only when `min >= 0`, as devices may not show a minus key (`-`).
- `"numeric"`: When `step` is an integer, which is true unless overrided.
- `"decimal"`: When `step` is not an integer.
- `pattern`: Serves as a fallback for setting input mode in iOS Safari.
##### Opt-in behavior
- `clampAfterBlur`: Enforces range constraints (`min`, `max`) by adjusting `value` when the component loses focus.
- `roundAfterBlur`: Enforces `step` constraint by adjusting `value` when the component loses focus.