README
react-geolocation-autosuggest
React Google location auto-suggest/autocomplete to provide all possible information with fields like Country, State, City, Pin-code etc.
A Node.js React package that gives Google map location api based autocomplete/autosuggest dropdown to search and select location from autosuggested places. It also give you the other useful information like Country, State, City, Pin-code with the fields as well and can be customise as per user requirment, rest information like street_number, lat, long etc can be seen in onSelect method along with above.
Installation
The package can be installed via NPM:
npm install react-geolocation-autosuggest --save
yarn add react-geolocation-autosuggest
react-geolocation-autosuggest can be imported as follows
var GeoLocation = require('react-geolocation-autosuggest');
OR
import GeoLocation from 'react-geolocation-autosuggest';
Prerequisite
You need to include your Google map API key to you app. Somewhere in index.html.
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&libraries=places"></script>
Visit Google's API documentation to get your Google API key.
User will get these Output/data in onSelect method of GeoLocation
{"street_number":"2235",
"route":"5th Avenue",
"locality":"New York",
"administrative_area_level_1":"New York",
"country":"United States",
"postal_code":"10037",
"lat":40.8131697,
"lng":-73.93705539999996,
"description":"2235 5th Avenue, New York, NY, USA",
"countryFullDetail":{
"long_name":"United States",
"short_name":"US",
"types":["country","political"]
},
"stateFullDetail":{
"long_name":"New York",
"short_name":"NY",
"types":["administrative_area_level_1","political"]
},
"cityFullDetail":{
"long_name":"New York",
"short_name":"New York",
"types":["locality","political"]
}
}
Examples
Basic Example with all default props
import React, { Component } from 'react';
import GeoLocation from 'react-geolocation-autosuggest';
class App extends Component {
render() {
return (
<div className="App" >
<GeoLocation/>
</div>
);
}
}
export default App;
Example to pass preSelectedValue/default value to address search field and fill all other fields
import React, { Component } from 'react';
import GeoLocation from 'react-geolocation-autosuggest';
class App extends Component {
render() {
return (
<div className="App" >
<GeoLocation
preSelectedValue={'Avenida Corrientes 2252, Buenos Aires, Argentina'}
// pass a valid address for better/exact match
/>
</div>
);
}
}
export default App;
Example to show use of onSelect And onChange method
import React, { Component } from 'react';
import GeoLocation from 'react-geolocation-autosuggest';
class App extends Component {
onSelect = (data) => {
//console.log('data after selection', data);
}
onChange = (data) => {
//console.log('data whenever change occour', data);
}
render() {
return (
<div className="App" >
<GeoLocation
onSelect={this.onSelect}
onChange={this.onChange} />
</div>
);
}
}
export default App;
Example to remove all other fields(Country, State, City, Pin-code)
import React, { Component } from 'react';
import GeoLocation from 'react-geolocation-autosuggest';
class App extends Component {
render() {
return (
<div className="App" >
<GeoLocation
showAllFields={false}
/>
</div>
);
}
}
export default App;
Example to show only specific fields as per requirment from Country, State, City, Pin-code
import React, { Component } from 'react';
import GeoLocation from 'react-geolocation-autosuggest';
class App extends Component {
render() {
return (
<div className="App" >
<GeoLocation
showAllFields={false}
isCountryVisible={true}
isStateVisible={true}
/>
</div>
);
}
}
export default App;
Example to disable(non-editable) all fields(Country, State, City, Pin-code)
import React, { Component } from 'react';
import GeoLocation from 'react-geolocation-autosuggest';
class App extends Component {
render() {
return (
<div className="App" >
<GeoLocation
isAllDisabled={true}
/>
</div>
);
}
}
export default App;
Example to disable specific field(Country, State, City, Pin-code)
import React, { Component } from 'react';
import GeoLocation from 'react-geolocation-autosuggest';
class App extends Component {
render() {
return (
<div className="App" >
<GeoLocation
isAllDisabled={false}
isCityDisabled={true}
isPinCodeDisabled={true}
/>
</div>
);
}
}
export default App;
Example to show all fields in seprate row with full width(Country, State, City, Pin-code)
import React, { Component } from 'react';
import GeoLocation from 'react-geolocation-autosuggest';
class App extends Component {
render() {
return (
<div className="App" >
<GeoLocation
displayInline={false}
/>
</div>
);
}
}
export default App;
Example to pass labelText, errorText, and key(react key can help to update component if want in particular condition)
import React, { Component } from 'react';
import GeoLocation from 'react-geolocation-autosuggest';
class App extends Component {
render() {
return (
<div className="App" >
<GeoLocation
errorText={}
countryLabelText={'Country'}
stateLabelText={'State'}
cityLabelText={'City'}
pincodeLabelText={'Pin code'}
key={'autosuggestAddressSearch'}
/>
</div>
);
}
}
export default App;
Style prop
You can create custom fields styles using the material-ui theme creator as all the fields are of material ui so all material-ui(v3.9.2) property can be applied.
import React, { Component } from 'react';
import GeoLocation from 'react-geolocation-autosuggest';
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
const theme = createMuiTheme({
typography: {
useNextVariants: true,
},
overrides: {
MuiInput: {
underline: {
"&&&&:hover:before": {
borderBottom: "1px solid rgba(0, 0, 0, 0.42)"
},
"&&&&:after": {
borderBottom: "2px solid #2196f3"
},
// borderBottom: "1px solid #2196f3"
}
},
MuiFormLabel: {
root: {
color: "blue",
"&$focused": {
"&$focused": {
"color": "#2196f3"
}
}
},
}
}
});
class App extends Component {
render() {
return (
<div className="App" >
<MuiThemeProvider theme={theme}>
<GeoLocation/>
</MuiThemeProvider>
</div>
);
}
}
export default App;
Default parameter options value
showAllFields: true,
isAllDisabled: false,
isCountryVisible: false,
isStateVisible: false,
isCityVisible: false,
isPinCodeVisible: false,
isCountryDisabled: false,
isStateDisabled: false,
isCityDisabled: false,
isPinCodeDisabled: false,
displayInline: true,
addressLabelText: 'Search Address...',
errorText: '',
countryLabelText:'Country',
stateLabelText:'State',
cityLabelText:'City',
pincodeLabelText:'Pin code',
key:'autosuggestAddressSearch',
preSelectedValue: ''
Available options list
showAllFields: Boolean,
isAllDisabled: Boolean,
isCountryVisible: Boolean,
isStateVisible: Boolean,
isCityVisible: Boolean,
isPinCodeVisible: Boolean,
isCountryDisabled: Boolean,
isStateDisabled: Boolean,
isCityDisabled: Boolean,
isPinCodeDisabled: Boolean,
displayInline: Boolean,
addressLabelText: String,
errorText: String,
countryLabelText: String,
stateLabelText: String,
cityLabelText: String,
pincodeLabelText: String,
key: String,
preSelectedValue: String,
onSelect: Function,
onChange: Function