ReactBits: Clearable input with Autofocus

ReactBits: Clearable input with Autofocus

ReactBits: Clearable Input with Autofocus. Today I start a series of short articles which I am going to call ReactBits: Clearable Input with Autofocus. Know how to implement them and the challenges you may face by doing so, the first one as the title says, a clearable input with autofocus.

Small Reusable Components.

Today I start a series of short articles which I am going to call ReactBits, in these, I will be posting some small components with some specific requirements that you could adapt to use in your projects but more importantly, know how to implement them and the challenges you may face by doing so, the first one as the title says, a clearable input with autofocus.

Requirements

  • An input with a clear button inside
  • The clear button should only be displayed if the input is not empty and it is focused.
  • After clearing the input using the clear button, it should remain focused so the user can continue writing.

Mock

Very simple mock

Plan

For this component, we are going to use an internal state so we can control the visibility of the clear button, also we are going to use references for the focus. For sake of clarity on this example, I will include the state for controlling the value of the input and the onChange handler, which on a production project this should be done in the parent.

react react-hook javascript typescript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

What are hooks in React JS? - INFO AT ONE

In this article, you will learn what are hooks in React JS? and when to use react hooks? Also, we will see the react hooks example.

How to Build Meme Generator with React, React Hooks and TypeScript

The best way to learn something is by doing. It works even better if it means working on something for fun. So, how about learning about React, React hooks and TypeScript by building your own meme generator? This tutorial will show you how to do it.

How the React useState Hook Works in TypeScript

The most out of useState by using TypeScript for autocompletion and error catching. I feel like TypeScript really unlocks the potential of React Hooks. Using TypeScript with React Hooks just feels right. Learn how the React useState Hook Works in TypeScript.

React With Typescript, Redux And Thunk - React Javascript Tutorial

Wanted to make a video with redux and redux-thunk using typescript. I found this a bit confusing when I first learned it and hopefully this videos makes the ...