react-select-places
Advanced tools
A Select control for places built from React-Select and Google Places.
A Select control for places built from React-Select and Google Places.
Live demo: akofman.github.io/react-select-places
To run it locally, clone this repo then run:
npm install
npm run storybook
Then open localhost:6006 in a browser.
:warning:react-select is not bundled into this component. You must add it as a dependency of your project in order to use react-select-places.
npm install --save react-select
npm install --save react-select-places
Then you can import react-select-places in your application:
import SelectPlaces from 'react-select-places';
In order to style SelectPlaces, you can import the react-select css:
import 'react-select/dist/react-select.css';
Or you can use styled-component.
React-Select-Places uses the Google Maps Places API, so you need to include it in the <head> of your HTML:
<!DOCTYPE html>
<html>
<head>
…
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
</head>
<body>
…
</body>
</html>
It wraps React-Select so that you can use all of its options.
Example:
var SelectPlaces = require('react-select-places');
function logChange(val) {
console.log("Selected: " + val);
}
<SelectPlaces
onChange={logChange}
/>
The value retrieved from the parameter of the onChange callback is a PlaceResult.
You also have the possibility to configure the AutocompletionRequest as it is specified in the Google Places API.
Example:
const autocompletionRequest = {
types: ['(cities)'],
componentRestrictions: {
country: 'FR'
}
};
<SelectPlaces autocompletionRequest={autocompletionRequest} />
A default value can be provided from the value property:
<SelectPlaces value={{ label:'Paris' }} />
The value property can be an object with the label and placeId attributes.
If placeId is provided, this component will use the Google Maps Places API in order to retrieve the label to display in the right language. If the place is not retrieved, the provided label will be used.
<SelectPlaces value={{ label:'defaultLabel', placeId:'ChIJpTvG15DL1IkRd8S0KlBVNTI' }} />
It is also possible to provide only the label as a string:
<SelectPlaces value='Paris' />
See the CONTRIBUTING.md for information on how to contribute.
MIT Licensed. Copyright (c) Alexis Kofman 2017.
FAQs
A Select control for places built from React-Select and Google Places.
We found that react-select-places demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.