Creating a React Input component in Typescript

giselamd

Gisela Miranda Difini

Posted on August 9, 2020

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

💖 💪 🙅 🚩
giselamd
Gisela Miranda Difini

Posted on August 9, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related