react-google-location-suggest

react-google-location-suggest is a React component providing Google locations Autocomplete functionality. This component allows users to search for locations by name or address, select suggestions, and view detailed location information such as latitude and longitude.

Features

• 🌐 Google locations Autocomplete: Fetches location suggestions based on user input.
• 🎯 Keyboard Navigation: Navigate through suggestions using arrow keys.
• 🖱️ Clickable Suggestions: Select suggestions with a mouse click.
• 🌍 location Details Fetching: Retrieves detailed information, including latitude and longitude, for selected locations.

Installation

Install react-google-location-suggest via npm:

1npm install react-google-location-suggest

or with yarn:

1yarn add react-google-location-suggest

Setup

Get a Google locations API Key

To use this component, you'll need a Google locations API key. Follow these steps:

1. Go to the Google Cloud Console.
2. Create or select a project.
3. Enable the "locations API" for your project.
4. Generate an API key under "Credentials."

Usage

Here's how to use the component in your React app:

1import GoogleLocationSuggest from "react-google-location-suggest";
2
3onst App = () => {
4  const handleLocationSelect = (data) => {
5    console.log(data);
6  };
7
8  const onChangeHandler = (value) => {
9    console.log(value);
10  };
11
12  return (
13    <GoogleLocationSuggest
14      apiKey={"YOUR_API_KEY"}
15      handleLocationSelect={handleLocationSelect}
16      onChangeHandler={onChangeHandler}
17      defaultValue={"11735 meadow"}
18      placeholder={"Enter your address"}
19      inputClass={{
20        border: "1px solid #efefef",
21      }}
22      suggestionClass={{
23        top: "10px",
24      }}
25    />
26  );
27};
28
29export default App;

Component Props

Prop	Type	Description
apiKey	string	Required. Your Google locations API key.
handleLocationSelect	function	Required. Callback function triggered when a suggestion is selected. Receives full location details.
onChangeHandler	function	Optional. Callback function called each time the user types in the input field.
defaultValue	string	Optional. Initial value for the input field.
placeholder	string	Optional. placeholder text displayed in the input field when empty.
inputClass	object	Optional. Style object to customize the input field (e.g., border).
suggestionClass	object	Optional. Style object to customize each suggestion item (e.g., top).

Development

To modify or improve this component:

1. Clone the repo: git clone https://github.com/mhshuvoalways/react-google-location-suggest.git
2. Install dependencies: npm install
3. Start the development server: npm start

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contributing

Contributions are welcome! If you'd like to help improve this component, please fork the repository and submit a pull request.

Issues

If you encounter any issues, please open an issue on GitHub. We welcome bug reports and feature requests.