DEV Community

✨ Introducing use-places-autocomplete: React hook for Google Maps Places Autocomplete

Welly on February 11, 2020

Yooo guys! with use-places-autocomplete you can build your own places autocomplete UI like the following demo in 10 minutes, no kidding 😉 ⚡️ Try...
Collapse
 
prissvi profile image
PrissVI

I am trying to write tests (with Jest and Enzyme) for the demo, but the data array is always empty (and status is not "OK")... Any ideas on how to solve the problem or where to find tests of the demo ?

Collapse
 
wellyshen profile image
Welly

You can mock the Google Map API like this: github.com/wellyshen/use-places-au...

Collapse
 
prissvi profile image
PrissVI • Edited

These are test for the package that I am using ('use-places-autocomplete'), but I want to test my own implementation (which I used this package for)

Thread Thread
 
wellyshen profile image
Welly • Edited

You can use jest mock functions to mock this library and let it responses the status and data that you want.

Thread Thread
 
wellyshen profile image
Welly

If you still don't know how to do it, feel free to leave an issue on the repo.

Collapse
 
eminqasimov profile image
Emin Qasimov • Edited

hi, thanks for this amazing hook
I have a question, How can i integrate this hook with useScript -usehooks.com/useScript/
to load google map script asyncly?
I get below error

'> 💡use-places-autocomplete: Google Maps Places API library must be loaded. See: github.com/wellyshen/use-places-au...';

Collapse
 
chakandinakira profile image
Lloyd

I am getting the same error, has anyone found a solution for this?

Collapse
 
glacian22 profile image
Abram Thau

Hi Welly, this is really nicely designed! One concern though, you're using a script tag to bring in the google maps api, but that exposes the API key to the user. Any ideas on how to keep the key safe?

Collapse
 
wellyshen profile image
Welly

Google has provided many way to limit the usage of the API key. You can configure it via Google Cloud Console (console.cloud.google.com)

Collapse
 
prettydev profile image
Max

Sometimes the "ready" is false, so the input is disabled. How to solve this problem?

Collapse
 
wellyshen profile image
Welly

Can you give me an open issue with a minimal reproduced repo, thank you.

Collapse
 
trapsibot profile image
Trapsi Bot

Hi Welly , its really nice but while using the package I can't limit to one particular country is there any possible way ?

Collapse
 
chanwkkk profile image
Yingqi Chen

Hey Welly that's cool! But do you know if I can use it with Gatsby(a react based language)?

Collapse
 
olegmalyarenko profile image
olegmalyarenko

Your demo isn't working

Collapse
 
wellyshen profile image
Welly

Fixed