Here is a nice way to create a React Input component using typescript!
Using an interface to declare your own prop types as well as extending all HTMLInputElement
(https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) properties to allow your component to accept all those input props you might need to increase accessibility for example 😄
Here you can see that by extending those HTMLInputElement
properties in InputProps
we can have all input
element props passed to this component. Instead of having to declare each one we can just use a spread attribute ...rest
Original post: https://giselamirandadifini.com/creating-a-react-input-component-in-typescript
Latest comments (9)
why not React.ComponentProps<"input">
Just what I was looking for! Thank you! :)
Thanks so much
Good one
Thanks
This saved me thanks :)
Thanks a lot for this! I was stuck trying to pass the Input Props through another custom component to the input element. This has solved it for me! Great work!
Good article I really should start working with Typescript.
Nice one! Thanks for posting it :)