Create your own type ahead dropdown in React

Let’s create a component, a Type Ahead Dropdown in React from scratch.

In this article, we will create our own type ahead dropdown in react. I was working on a react project, where I need a drop down where I can start typing and all the related results will be shown. But there were some conditions like I need not use any 3rd party library or I can’t use any npm modules also I can’t use bootstrap. So, In your programming career, there would be a possibility to make something like that. So read this article, It will help you make a react component without using any 3rd party library.

Gif: type ahead dropdown

Let’ start creating a type ahead dropdown.

We will create our component from scratch, In this, we will create a react app by using create-react-app and will create our dropdown as a component and will use it later. In this, we will have a list of cities and we will search for cities in our typeahead dropdown.

Let’s create a react app:

To start this, we need to create a demo app using below command, let’s run the below command and create a demo app:

npx create-react-app type-ahead-drop-down

After successful completion of the above command :

cd type-ahead-drop-down
npm start

Open localhost:3000 in the browser:

Check your current port ( here default port is 3000 ) and confirm its working as:

Add cities in our app:

Let’s add some cities in our app so that we can enjoy searching by using our component. Create a file “cities.js” inside “src” folder and write below codes:

src/cities.js:

Create a component “TypeAheadDropDown.js”:

Now it’s time to create our component, create a file “TypeAheadDropDown.js” inside “src” folder and write the below code:

src/TypeAheadDropDown.js:

Design our TypeAheadDropDown:

Let’s write some CSS to design our component, create a file “TypeAheadDropDown.css” in “src” folder, and write the below codes:

Now our component is created, Now its time to use our component in our main app.

Use the component in the app:

in the App.js file, we will import our component and use it. See the below code:

src/App.js:

Run the project:

Let’s run this app, Open browser, and hit URL “localhost:3000” and see the result. You are now able to search the cities and see the suggest result as:

Further Improvement in this app:

In this, we can use implement “memoization” and also implement keyboard support, Throatling, Debouncing, and all.

Conclusion:

We learned the following things from this article:
* How to create a create app?
* How we can create our own type ahead dropdown? and how we can use this component in our app?

Read this article for the basics of hooks and this article will help to understand more about hooks. If you’re interested in Node.js or JavaScript, then this link will help.

Thank you for taking the time to read this article. If you like and learned something from this article, click the 👏🏻 icon so other people will see this here on Medium.