DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for Creating a React Input component in Typescript
Gisela Miranda Difini
Gisela Miranda Difini

Posted on

Creating a React Input component in Typescript

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

Input component auto complete

React input component with spread attribute

Original post: https://giselamirandadifini.com/creating-a-react-input-component-in-typescript

Top comments (6)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Good article I really should start working with Typescript.

Collapse
 
leomjaques profile image
leonardo jaques ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป

Nice one! Thanks for posting it :)

Collapse
 
gvinod1991 profile image
Vinod Godti

Good one

Collapse
 
enbonnet profile image
Ender Bonnet

Thanks

Collapse
 
maxphillipsdev profile image
Max Phillips

This saved me thanks :)

Collapse
 
karnikhonza profile image
Jan Kรกrnรญk

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!

5 Websites To Learn Frontend Web Development Faster ๐Ÿ’จ

>> Check out this classic DEV post <<