在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):ErrorPro/react-google-autocomplete开源软件地址(OpenSource Url):https://github.com/ErrorPro/react-google-autocomplete开源编程语言(OpenSource Language):JavaScript 100.0%开源软件介绍(OpenSource Introduction):The package provides 3 tools for working with google places services:
If you find this package helpful please give it a star because it hepls it grow and motivates us to build new features and support the old ones. Install
or
As of version 1.2.4, you can now pass an <AutoComplete
apiKey={YOUR_GOOGLE_MAPS_API_KEY}
onPlaceSelected={(place) => console.log(place)}
/>
or
const { ref } = usePlacesWidget({
apiKey: YOUR_GOOGLE_MAPS_API_KEY,
onPlaceSelected: (place) => console.log(place)
})
<AnyInput ref={ref} /> Alternatively if not passing the <script
type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&libraries=places"
></script> ReactGoogleAutocompleteThis is a simple react component for working with google autocomplete import Autocomplete from "react-google-autocomplete";
<Autocomplete
apiKey={YOUR_GOOGLE_MAPS_API_KEY}
onPlaceSelected={(place) => {
console.log(place);
}}
/>; Props
You can pass any prop specified for the hmtl input tag. You can also set options.fields prop if you need extra information, now it defaults to basic data in order to control expenses. usePlacesWidgetIs a hook that has a single config argument. It has exactly the same interface as ReactGoogleAutocomplete props. This hook is actually used in the ReactGoogleAutocomplete component. import { usePlacesWidget } from "react-google-autocomplete";
export default () => {
const { ref, autocompleteRef } = usePlacesWidget({
apiKey:YOUR_GOOGLE_MAPS_API_KEY,
onPlaceSelected: (place) => {
console.log(place);
}
});
return <AnyInput ref={ref} {...anyOtherProp}>
} ArgumentsIt has only one config argument which has propperties: Returned valueThis hook returns object with only two properties:
usePlacesAutocompleteServiceThis is an initial implementation of debounced google places autocomplete service. It gives you an option to reduce the amount of requests sent to google which reduce your costs. For the time being we decided to use import usePlacesService from "react-google-autocomplete/lib/usePlacesAutocompleteService";
export default () => {
const {
placesService,
placePredictions,
getPlacePredictions,
isPlacePredictionsLoading,
} = usePlacesService({
apiKey: process.env.REACT_APP_GOOGLE,
});
useEffect(() => {
// fetch place details for the first element in placePredictions array
if (placePredictions.length)
service.placesService?.getDetails(
{
placeId: placePredictions[0].place_id,
},
(placeDetails) => savePlaceDetailsToState(placeDetails)
);
}, [placePredictions]);
return (
<>
<Input
placeholder="Debounce 500 ms"
onChange={(evt) => {
getPlacePredictions({ input: evt.target.value });
}}
loading={isPlacePredictionsLoading}
/>
{placePredictions.map((item) => renderItem(item))}
</>
);
}; ArgumentsThe hook has only one config argument.
Returned valueThe hook returns an object with properties:
ExamplesSimple autocomplete with optionsimport Autocomplete from "react-google-autocomplete";
<Autocomplete
apiKey={YOUR_GOOGLE_MAPS_API_KEY}
style={{ width: "90%" }}
onPlaceSelected={(place) => {
console.log(place);
}}
options={{
types: ["(regions)"],
componentRestrictions: { country: "ru" },
}}
defaultValue="Amsterdam"
/>; or import { usePlacesWidget } from "react-google-autocomplete";
export default () => {
const { ref } = usePlacesWidget({
apiKey: YOUR_GOOGLE_MAPS_API_KEY,
onPlaceSelected: (place) => {
console.log(place);
},
options: {
types: ["(regions)"],
componentRestrictions: { country: "ru" },
},
});
return <input ref={ref} style={{ width: "90%" }} defaultValue="Amsterdam" />;
}; Getting access to the google autocomplete instance<Autocomplete
onPlaceSelected={(place, inputRef, autocomplete) => {
console.log(autocomplete);
}}
/> or const { ref, autocompleteRef } = usePlacesWidget({
apiKey: YOUR_GOOGLE_MAPS_API_KEY,
onPlaceSelected: (place) => {
console.log(place);
},
}); docs/examples.jsMore examples(dynamic props, MaterialUI, Ant, Bootstrap) could be found inFormik example lives here Debounce example lives here TypescriptWe are planning on rewriting the library with TS/Flow in the later releases but you can already use it with TypeScript because we use declaration files. TODO
Troubleshooting
ContributionIf you would like to see something in this library please create an issue and I will implement it as soon as possible. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论