position-input.md

PositionInput

Source

A location input with a map and text input.

This requires the Google Maps JavaScript API with the places library enabled. You can find more information about the Maps API here.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { PositionInput } from 'chayns-components';

// ...

<PositionInput {...} />

Props

The PositionInput-component takes the following props:

Name	Type	Default	Required
defaultPosition	{ lat: number, lng: number }		✓
onPositionChange	function	() => {}
mapOptions	object	{ zoom: 15, gestureHandling: 'greedy', disableDefaultUI: true, styles: [ { featureType: 'poi', elementType: 'labels', stylers: [{ visibility: 'off' }], }, ], }
children	function	(value, onChange) => ( <Input placeholder="Position" value={value} onChange={onChange} /> )
parent	ReactNode

defaultPosition

defaultPosition: { lat: number, lng: number }

The position that will be used as a starting point.

---

onPositionChange

onPositionChange?: function

This will be called when the position selection changes.

---

mapOptions

mapOptions?: object

An object with options for the Google Map. These options are documented here.

---

children

children?: function

A render function for creating a custom input overlay. It receives the currently selected position as its first argument and an onChange-method as its second argument.

---

parent

parent?: ReactNode

A DOM element that the overlay should be rendered into.