React Places Autocomplete - DEMO

https://github.com/tasiodev/react-places-autocomplete

Basic example


import PlacesPicker from '@tasiodev/react-places-autocomplete'
import { useState } from 'react'
export default function App () {
  const [value, setValue] = useState(null)
  return <PlacesPicker
          gMapsKey='**********'
          onChange={setValue}
          placeholder='Search for a place...'
        />
}

With initial value


import PlacesPicker from '@tasiodev/react-places-autocomplete'
import { useState } from 'react'
export default function App () {
  const [value, setValue] = useState('ChIJ5TCOcRaYpBIRCmZHTz37sEQ')
  return <PlacesPicker
          gMapsKey='**********'
          placeId={value}
          onChange={setValue}
          placeholder='Search for a place...'
        />
}

Search limited to countries


import PlacesPicker from '@tasiodev/react-places-autocomplete'
import { useState } from 'react'
export default function App () {
  const [value, setValue] = useState(null)
  return <PlacesPicker
          gMapsKey='**********'
          searchTypes={['country']}
          placeId={value}
          onChange={setValue}
          placeholder='Search for a country...'
        />
}

More types: https://developers.google.com/maps/documentation/places/web-service/supported_types

Customization


import PlacesPicker from '@tasiodev/react-places-autocomplete'
import { useState } from 'react'
export default function App () {
  const [value, setValue] = useState(null)
  return <PlacesPicker
          gMapsKey='**********'
          placeId={value}
          onChange={setValue}
          placeholder='Search for a place...'
          customStyles={{
            fieldInput: { color: 'white', backgroundColor: 'black', borderRadius: 4 },
            searchResultsContainer: { marginTop: 12, backgroundColor: '#bbb' },
            searchResult: { padding: 6 },
            gmapContainer: { border: '3px solid black', height: 400 }
          }}
        />
}

Map always visible


import PlacesPicker from '@tasiodev/react-places-autocomplete'
import { useState } from 'react'
export default function App () {
  const [value, setValue] = useState(null)
  return <PlacesPicker
          gMapsKey='**********'
          placeId={value}
          onChange={setValue}
          mapExpanded
          placeholder='Search for a place...'
        />
}

Map and results language


import PlacesPicker from '@tasiodev/react-places-autocomplete'
import { useState } from 'react'
export default function App () {
  const [value, setValue] = useState(null)
  return <PlacesPicker
          gMapsKey='**********'
          placeId={value}
          onChange={setValue}
          language='pt'
          placeholder='Search for a place...'
        />
}