/Javascript/React/React google places auto complete example

React google places auto complete example

import React from 'react';import PlacesAutocomplete, {  geocodeByAddress,  getLatLng,} from 'react-places-autocomplete'; class LocationSearchInput extends React.Component {  constructor(props) {    super(props);    this.state = { address: '' };  }   handleChange = address => {    this.setState({ address });  };   handleSelect = address => {    geocodeByAddress(address)      .then(results => getLatLng(results[0]))      .then(latLng => console.log('Success', latLng))      .catch(error => console.error('Error', error));  };   render() {    return (      <PlacesAutocomplete        value={this.state.address}        onChange={this.handleChange}        onSelect={this.handleSelect}      >        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (          <div>            <input              {...getInputProps({                placeholder: 'Search Places ...',                className: 'location-search-input',              })}            />            <div className="autocomplete-dropdown-container">              {loading && <div>Loading...</div>}              {suggestions.map(suggestion => {                const className = suggestion.active                  ? 'suggestion-item--active'                  : 'suggestion-item';                // inline style for demonstration purpose                const style = suggestion.active                  ? { backgroundColor: '#fafafa', cursor: 'pointer' }                  : { backgroundColor: '#ffffff', cursor: 'pointer' };                return (                  <div                    {...getSuggestionItemProps(suggestion, {                      className,                      style,                    })}                  >                    <span>{suggestion.description}</span>                  </div>                );              })}            </div>          </div>        )}      </PlacesAutocomplete>    );  }}

Source: npmjs.com

Similar codes

1 vote351 views4 answers
React native debug apk
Javascript React
1 vote347 views1 answer
Check if new user in firebase react
Javascript React
35 votes350 views6 answers
Create react app with tailwind
Javascript React
21 votes306 views6 answers
React native apk build
Javascript React
0 vote346 views1 answer
Reactjs clic copy
Javascript React
0 vote344 views1 answer
React-map-multidimensional-array
Javascript React
1 vote355 views1 answer
React get input value on button click functional component
Javascript React
0 vote337 views1 answer
_40 0 _55 null _65 0 _72 null react native fetch
Javascript React
11 votes353 views2 answers
How to add react icons using npm
Javascript React
3 votes349 views3 answers
How to manage safearea in both iphone and android in react native
Javascript React