GISELA MIRANDA DIFINIGI
Navigate back to the homepage

Creating a React Input component in typescript

Gisela Difini, 
August 9th, 2020 · 1 min read

🇺🇸 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 typescript

🇧🇷 Aqui está uma forma de criar um componente de Input usando typescript em React!

Usando uma interface pra declarar os tipos das suas props específicas e estendendo todas as propriedades do HTMLInputElement para permitir que o componente aceite todas essas props de um input que você talvez precise para, por exemplo, melhor a acessibilidade 😄

Nesta imagem você pode ver que por estender as propriedades do HTMLInputElement no InputProps nós podemos passar todas as props do elemento input para o componente. Ao invés de ter que declarar cada uma, nós podemos usar apenas o spread attribute ...rest

auto complemento no componente input

More articles from Gisela Miranda Difini

React Components Library

Hi! Just wanted to share this repo that I've created with typescript, styled-components, storybook, and react testing library for starting…

July 14th, 2020 · 1 min read

Parallel Mandelbrot Set Using Golang

This post explains how to generate a Mandelbrot set in parallel using Golang goroutines . Source code here: https://github.com/GiselaMD…

June 17th, 2021 · 2 min read
© 2020–2021 Gisela Miranda Difini
Link to $https://github.com/GiselaMDLink to $https://instagram.com/giselamirandaLink to $https://www.linkedin.com/in/giselamd/Link to $https://dribbble.com/GiselaDifini