Create a Google AutoComplete Component with React & Tailwind

4 min readJul 9, 2022

Hi there! today I am going to show how you can create an Autocomplete component with Google API with React and Tailwind from scratch, but obviously, we have to get some requirements before starting.

Requirements

🔴 Google API key, you can get it from the Google Developers page 👈🏻

🔴 Node js installed on your PC you can download it from here 👈🏻

🔴 Text editor, We will use VS Code

Setup the project

Ok let's create the react project with Vite with

npm create vite@latest

After that, we will assign the name of the project: google-autocomplete and after that, we will select react as a framework.

and finally, We run npm install and npm run dev to run our app

cd google-autocomplete && npm install && npm run dev

Nice! now We will open the project in VSCode:

ok but first we have to install Tailwind CSS in our project:

npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p

adding the configuration in the tailwing.conf.js

module.exports = {  mode: 'jit', content: [ “./index.html”, “./src/**/*.{vue,js,ts,jsx,tsx}”, ], theme: { extend: {}, }, plugins: [], }

and copying the next imports in the index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Perfect now we will run the project again with:

npm run dev

Ok we did the setup of our project, now we have to create a new component in a new file, “GoogleAutoComplete” in components/GoogleAutoComplete.jsx

then we have to import in our app.js:

As you can see, I did some changes in the app.jsx just for add a grid with 3 cols and to center the main container, and I imported our GoogleAutoComplete component.

Ok… let's back to the GoogleAutoComplete.jsx, and will create an input to catch the text and make the research in the Google API services.

And you can add some style with tailwind.css

Perfect now we have to import the google lib in the index.html

Excellent! now We back to the component to create the getMatches functions to find all coincidences with the text value from input.

As you can see I created a getMatches function to find in the AutoCompleteService form places lib in i have to sent some options like the text, the country in my Case Mexico and the type of place in my case address, you can see all the docs from here 👈🏻

Also i created an async function doQuery to call the getMatches with an async/await and I got the results in a result variable and after we will save in an useState. And finally I have to created am useEffect to use when text has some change.

As you can see in the devs tools I am showing the results of the gmaps lib:

Now I have to purge the results in a new string but if you see the description field is the important data for us. then we have to map this array object in save the result in a new useState variables called coincidences: