react-geolocation-autosuggest

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:

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