React Input Component Validate Zip Code
Today I wanted to share a react snippet for Zip Code validation within an input.
The full example of the code is all the way at the bottom, but first I wanted to share a list of all the things this example gets into.
- A Reusable React Input Component
- Input handling (keydown, keyup, and paste events)
- Numeric keyboard on input focus when using mobile devices
- Utility function helpers
- Local storage
- Initial React application state
- Updating application state upon local storage being set
Reusable React Component
Below is the boilerplate Input component and how to implement it:
Next we want to take a look at the input handling functions:
Numeric keyboard (mobile devices)
Forcing the numeric keyboard on input focus with these lines:
Notice: inputmode, pattern & type props passed to our component.
Including Utility Helpers and Usage
Include the helper utility for local storage and an example of setting it (on zip code submit).
Local Storage Load In
Then within our constructor we want to add before the initial state
Demo the thing…