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.

Click here for live demo

Installation

The package can be installed via NPM:

1npm install react-geolocation-autosuggest --save
2
3yarn add react-geolocation-autosuggest

react-geolocation-autosuggest can be imported as follows

1var GeoLocation = require('react-geolocation-autosuggest');
2
3OR
4
5import GeoLocation from 'react-geolocation-autosuggest';
6

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

1{"street_number":"2235",
2"route":"5th Avenue",
3"locality":"New York",
4"administrative_area_level_1":"New York",
5"country":"United States",
6"postal_code":"10037",
7"lat":40.8131697,
8"lng":-73.93705539999996,
9"description":"2235 5th Avenue, New York, NY, USA",
10"countryFullDetail":{
11    "long_name":"United States",
12    "short_name":"US",
13    "types":["country","political"]
14    },
15"stateFullDetail":{
16    "long_name":"New York",
17    "short_name":"NY",
18    "types":["administrative_area_level_1","political"]
19    },
20"cityFullDetail":{
21    "long_name":"New York",
22    "short_name":"New York",
23    "types":["locality","political"]
24    }
25}

Examples

Basic Example with all default props

1import React, { Component } from 'react';
2import GeoLocation from 'react-geolocation-autosuggest';
3
4class App extends Component {
5
6    render() {
7        return (
8            <div className="App" >
9                <GeoLocation/>
10            </div>
11        );
12    }
13}
14
15export default App;
16

Example to pass preSelectedValue/default value to address search field and fill all other fields

1import React, { Component } from 'react';
2import GeoLocation from 'react-geolocation-autosuggest';
3
4class App extends Component {
5
6    render() {
7        return (
8            <div className="App" >
9                <GeoLocation
10                 preSelectedValue={'Avenida Corrientes 2252, Buenos Aires, Argentina'}
11                 // pass a valid address for better/exact match
12                />
13            </div>
14        );
15    }
16}
17
18export default App;

Example to show use of onSelect And onChange method

1import React, { Component } from 'react';
2import GeoLocation from 'react-geolocation-autosuggest';
3
4class App extends Component {
5
6
7    onSelect = (data) => {
8        //console.log('data after selection', data);
9    }
10
11    onChange = (data) => {
12        //console.log('data whenever change occour', data);
13    }
14
15    render() {
16        return (
17            <div className="App" >
18                    <GeoLocation
19                        onSelect={this.onSelect}
20                        onChange={this.onChange} />
21            </div>
22        );
23    }
24}
25
26export default App;
27

Example to remove all other fields(Country, State, City, Pin-code)

1import React, { Component } from 'react';
2import GeoLocation from 'react-geolocation-autosuggest';
3
4class App extends Component {
5
6    render() {
7        return (
8            <div className="App" >
9                <GeoLocation
10                    showAllFields={false}
11                />
12            </div>
13        );
14    }
15}
16
17export default App;

Example to show only specific fields as per requirment from Country, State, City, Pin-code

1import React, { Component } from 'react';
2import GeoLocation from 'react-geolocation-autosuggest';
3
4class App extends Component {
5
6    render() {
7        return (
8            <div className="App" >
9                <GeoLocation
10                    showAllFields={false}
11                    isCountryVisible={true}
12                    isStateVisible={true}
13                />
14            </div>
15        );
16    }
17}
18
19export default App;

Example to disable(non-editable) all fields(Country, State, City, Pin-code)

1import React, { Component } from 'react';
2import GeoLocation from 'react-geolocation-autosuggest';
3
4class App extends Component {
5
6    render() {
7        return (
8            <div className="App" >
9                <GeoLocation
10                    isAllDisabled={true}
11                />
12            </div>
13        );
14    }
15}
16
17export default App;

Example to disable specific field(Country, State, City, Pin-code)

1import React, { Component } from 'react';
2import GeoLocation from 'react-geolocation-autosuggest';
3
4class App extends Component {
5
6    render() {
7        return (
8            <div className="App" >
9                <GeoLocation
10                    isAllDisabled={false}
11                    isCityDisabled={true}
12                    isPinCodeDisabled={true}
13                />
14            </div>
15        );
16    }
17}
18
19export default App;

Example to show all fields in seprate row with full width(Country, State, City, Pin-code)

1import React, { Component } from 'react';
2import GeoLocation from 'react-geolocation-autosuggest';
3
4class App extends Component {
5
6    render() {
7        return (
8            <div className="App" >
9                <GeoLocation
10                    displayInline={false}
11                />
12            </div>
13        );
14    }
15}
16
17export default App;

Example to pass labelText, errorText, and key(react key can help to update component if want in particular condition)

1import React, { Component } from 'react';
2import GeoLocation from 'react-geolocation-autosuggest';
3
4class App extends Component {
5
6    render() {
7        return (
8            <div className="App" >
9                <GeoLocation
10                 errorText={}
11                 countryLabelText={'Country'}
12                 stateLabelText={'State'}
13                 cityLabelText={'City'}
14                 pincodeLabelText={'Pin code'}
15                 key={'autosuggestAddressSearch'}
16                />
17            </div>
18        );
19    }
20}
21
22export 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.

1import React, { Component } from 'react';
2import GeoLocation from 'react-geolocation-autosuggest';
3import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
4
5const theme = createMuiTheme({
6    typography: {
7        useNextVariants: true,
8    },
9    overrides: {
10        MuiInput: {
11            underline: {
12                "&&&&:hover:before": {
13                    borderBottom: "1px solid rgba(0, 0, 0, 0.42)"
14                },
15                "&&&&:after": {
16                    borderBottom: "2px solid #2196f3"
17                },
18                // borderBottom: "1px solid #2196f3"
19            }
20        },
21        MuiFormLabel: {
22            root: {
23                color: "blue",
24                "&$focused": {
25                    "&$focused": {
26                        "color": "#2196f3"
27                    }
28                }
29            },
30        }
31    }
32});
33
34class App extends Component {
35
36    render() {
37        return (
38            <div className="App" >
39                <MuiThemeProvider theme={theme}>
40                    <GeoLocation/>
41                </MuiThemeProvider>
42            </div>
43        );
44    }
45}
46
47export default App;

Default parameter options value

1    showAllFields: true,
2    isAllDisabled: false,
3    isCountryVisible: false,
4    isStateVisible: false,
5    isCityVisible: false,
6    isPinCodeVisible: false,
7    isCountryDisabled: false,
8    isStateDisabled: false,
9    isCityDisabled: false,
10    isPinCodeDisabled: false,
11    displayInline: true,
12    addressLabelText: 'Search Address...',
13    errorText: '',
14    countryLabelText:'Country',
15    stateLabelText:'State',
16    cityLabelText:'City',
17    pincodeLabelText:'Pin code',
18    key:'autosuggestAddressSearch',
19    preSelectedValue: ''

Available options list

1    showAllFields: Boolean,
2    isAllDisabled: Boolean,
3    isCountryVisible: Boolean,
4    isStateVisible: Boolean,
5    isCityVisible: Boolean,
6    isPinCodeVisible: Boolean,
7    isCountryDisabled: Boolean,
8    isStateDisabled: Boolean,
9    isCityDisabled: Boolean,
10    isPinCodeDisabled: Boolean,
11    displayInline: Boolean, 
12    addressLabelText: String,
13    errorText: String,
14    countryLabelText: String,
15    stateLabelText: String,
16    cityLabelText: String,
17    pincodeLabelText: String,
18    key: String, 
19    preSelectedValue: String,
20    onSelect: Function,
21    onChange: Function