# react-google-geocoder > Google GeoCoding Input Latest version **0.2.0** (published 2018-08-13) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install react-google-geocoder pnpm add react-google-geocoder yarn add react-google-geocoder bun add react-google-geocoder ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.0 | | Published | 2018-08-13 | | First published | 2018-05-05 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 340.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | Mike Baranski | | Maintainers | mbaranski | | Keywords | react google-maps geocoding geo | ## Links - npm: https://www.npmjs.com/package/react-google-geocoder - Repository: https://github.com/mikebski/react-google-geocoder - Issues: https://github.com/mikebski/react-google-geocoder/issues - npm.io page: https://npm.io/package/react-google-geocoder ## Dependencies (2) - [react](https://npm.io/package/react.md) ^15.5.4 - [webpack](https://npm.io/package/webpack.md) ^2.6.1 ## Recent versions - 0.2.0 (latest) — 2018-08-13 - 0.1.7 — 2018-05-08 - 0.1.6 — 2018-05-08 - 0.1.5 — 2018-05-07 - 0.1.4 — 2018-05-06 - 0.1.3 — 2018-05-05 - 0.1.2 — 2018-05-05 - 0.1.1 — 2018-05-05 - 0.1.0 — 2018-05-05 - 0.0.1 — 2018-05-05 ## README # react-google-geocoder ## License ## Copyright (c) 2014-2018 Mike Baranski Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ## About **react-google-geocoder** gives you a text input that allows input validation and geo-location of an address via the Google Geo Location API. If there are multiple results returned, they are displayed as a list and one can be selected. Once a unique address is located, the component will call a callback with all of the available address information. See the demo [https://mikebski.github.io/react-google-geocoder-demo/](https://mikebski.github.io/react-google-geocoder-demo/) ## Installation Install using NPM: `npm install react-google-geocoder --save` You need to get a Google API credential that has GeoCoding enabled. See [https://developers.google.com/maps/documentation/geocoding/get-api-key](https://developers.google.com/maps/documentation/geocoding/get-api-key) for information on how to get a key. ### Note on Credential For local development with an npm server, for some reason this setup requires a "server" key instead of a credential that is restricted by referrer. If you get errors about needing server credentials without referrer restrictions, generate a new server credential. ## Usage Minimal usage is something like this: `` See the Options below for all available options ## Options |Property|Type|Default Value|Description| |--------|----|-----------|-------------| |apiKey|PropTypes.string.isRequired|**None**|Your Google API key| |searchButtonLabel|PropTypes.string|`Search`|Label for "Search" button| |resetButtonLabel|PropTypes.string|`Reset`|Label for "Reset" button| |selectButtonLabel|PropTypes.string|`Select`|Label for "Select" button| |acceptButtonLabel|PropTypes.string|`Accept`|Label for "Accept" button| |searchButtonClass|PropTypes.string|`geo-code-button geo-code-search-button`|CSS class for "Search" button| |resetButtonClass|PropTypes.string|`geo-code-button geo-code-reset-button`|CSS class for "Reset" button| |selectButtonClass|PropTypes.string|`geo-code-button geo-code-select-button`|CSS class for "Select" button| |acceptButtonClass|PropTypes.string|`geo-code-button geo-code-accept-button`|CSS class for "Accept" button| |errorMessage|PropTypes.string|`There was an error`|Error message text| |errorMessageClass|PropTypes.string|`geo-code-error`|CSS class for error message| |formTitle|PropTypes.string|`Search for Address`|Title of form| |showFormTitle|PropTypes.bool|`true`|Should show form title?| |formClass|PropTypes.string|`geo-code-form`|CSS class for form| |tableClass|PropTypes.string|`geo-code-table`|CSS class for address list table| |fieldLabel|PropTypes.string|`Address`|Label for address field| |inputLabelWrapperClass|PropTypes.string|`geo-code-input-and-label`|CSS class for input and label wrapper| |formButtonWrapperClass|PropTypes.string|`geo-code-form-button-wrapper`|CSS class for wrapper for form buttons| |inputClass|PropTypes.string|`geo-code-input`|CSS class for input| |labelClass|PropTypes.string|`geo-code-label`|CSS class for label| |onAddressAccept|PropTypes.func|` (value) => alert("Accepted: " + JSON.stringify(value))`|Method to call when "Accept" is clicked, this gets passed the address information| |input|PropTypes.element|`GeoCoderInput`|Input to use for the form| |searchButton|PropTypes.element|`GeoCoderSearchButton`|Search button to use for the form| |input|PropTypes.element|`GeoCoderInput`|Input to use for the form, see the demo page for how to do this| |searchButton|PropTypes.element|`GeoCoderSearchButton`|Button to use for search| |resetButton|PropTypes.element|`GeoCoderResetButton`|Button to use for reset| |acceptButton|PropTypes.element|`GeoCoderAcceptButton`|Button to use for accept| |selectButton|PropTypes.element|`GeoCoderSelectButton`|Button to use for select| ## Help Create an issue here for help --- _Source: https://npm.io/package/react-google-geocoder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._