@loadsmart/react-location-select v4.1.2

LocationSelect

This project belongs to Loadsmart's front-end team.

This is a spin-off of Miranda React Select powered with Google Autocomplete, Places, and Geocoder capabilities.

Getting started

To install it, run:

npm i @loadsmart/react-location-select

or

yarn add @loadsmart/react-location-select

Please, make sure that you also have all the peer dependencies installed.

Peer dependencies

• @loadsmart/loadsmart-ui: Provides the basic Select component.
• @loadsmart/utils-function: Helps with internal functions.
• @loadsmart/utils-string: Helps with internal functions.
• react and react-dom: Base UI library.
• react-helmet: Provided dynamic insertion of Google Maps API script (if not available).
• styled-components: Transitive dependency from @loadsmart/loadsmart-ui.

How to use

Important:

• You need to provide the googleMapsAPIKey prop in order for the Select to be visible and ready for location selection.
• If you add a custom datasource, make sure its reference its stable (i.e., you won't generate a new reference unnecessarily) so the Select can appropriately optimize its data source management.
• If you add a custom config for the Google Maps datasource, make sure its reference its stable (i.e., you won't generate a new reference unnecessarily) so the Select can appropriately optimize its data source management.

import LocationSelect from '@loadsmart/react-location-select';

<LocationSelect
	{ ...props }
	googleMapsAPIKey={ '<Your Google Maps API key>' }
/>;

The Google Maps datasource will always be included. You can customize how it fetches locations, if needed, by providing the config prop. This is the default config:

const DEFAULT_CONFIG = {
	// Source: https://developers.google.com/maps/documentation/places/web-service/supported_types#table3
	types: 'cities',
	// Source: https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#ComponentRestrictions
	restrictions: { country: [ 'us', 'ca' ] },
	// Source: https://developers.google.com/maps/documentation/javascript/reference/3.45/places-service#PlaceResult
	fields: [ 'address_components', 'place_id' ],
};

Mocking the returned locations

You most certainly will need unit tests around the code that will use the LocationSelect component. We export a mock factory to help returning the locations you want to work on your tests.

import { LocationSelectHelpersMockFactory } from '@loadsmart/react-locations-select';

jest.mock( 'path to location-select.helpers', () => {
	return LocationSelectHelpersMockFactory( [
		{
			address: 'New York, NY, USA',
			city: 'New York',
			country: 'US',
			lat: 0,
			lng: 0,
			place_id: 'ChIJOwg_06VPwokRYv534QaPC8g',
			state: 'NY',
			zipcode: '',
		},
	] );
} );

Contribute

First, make sure you have your env set to Node >= 16.