@dhl-parcel/dhl-servicepoint-locator NPM

dhl-servicepoint-locator

DHL Servicepoint Locator

Impression

Desktop	Mobile

Code example (with vanilla javascript)

https://codesandbox.io/s/wjox7zy1w

Install

npm install --save dhl-servicepoint-locator

Development environment

npm start Starts demo environment for local development
npm build Creates a distribution. We use rollup.
npm watch Continuously creates a distribution. Awesome in combination with npm link
npm publish --access public Publishes to npmjs

Docs

The component can be parameterized, either by passsing an options object ({}) to the callback specified under data-setup, or by specifying them as data- attributes on the DOM element the component will be mounted in, or in some cases by specifying them in the query string of the host URL, with the following properties:

Property	Description
`host` or `data-host`	API host to connect to for the API calls.
`apiKey` or `data-api-key`	Google Maps API key for showing the map.
`postalCode` or `data-postal-code` or `?pc=`	Postal code to perform a specific search with.
`query` or `data-query` or `?q=`	Query term to perform a generic search with.
`limit` or `data-limit` or `?l=`	Number to limit the amount of returned search results.
`tr` or `data-tr`	Callback that receives a translation key as the sole argument. Must return the translated value for that key.
`locale` or `data-locale`	ISO 639-1 value that determines the used locale (example: `nl-NL`).
`countryCode` or `data-country-code`	ISO 639-1 value that which country the search should be performed in (example: `BE`).
`selected` or `data-selected`	Value that preselects a specific ServicePoint.
`onChange` or `data-onchange`	Callback that receives the selected ServicePoint when a user interacts with the component.
`disableRefresh` or `data-disable-refresh`	Determines whether the data should be refreshed automatically when the user pans on the map.
`disableUrlSync` or `data-disable-url-sync`	Determines whether the address bar should be synchronized to reflect the state of the component.
`data-setup`	Specifies a location on the `window` object where a callback that sets up the component can be stored to be invoked at a later time. Can be called multiple times with new properties to update the component and returns a callback that can be invoked to teardown the component.
`toggleMap` or `data-toggle-map`	Determines whether the mobile viewport can toggle between the list and map view. If omitted, both are displayed.
`mapWidth` or `data-map-width`	If `toggleMap` is used, can be used to set the map width.
`mapHeight` or `data-map-height`	If `toggleMap` is used, can be used to set the map height.
`mapPosition` or `data-map-position`	If `toggleMap` is used, can be used to set the map position.

Usage

import React, { Component } from 'react'
import { ParcelshopLocator } from 'dhl-servicepoint-locator'

class App extends React.Component {
  state = {
    selected: ''
  }

  render() {
    return (
      <div>
        <ParcelshopLocator
          host="https://api-gw.dhlparcel.nl"
          apiKey="<provide_api_key>"
          countryCode="<provide_country_code>"
          zipCode="<provide_postal_code>"
          query="<provide_search_query>"
          onChange={parcelshop =>
            this.setState({
              selected: parcelshop.id
            })
          }
          selected={this.state.selected}
          tr={value => value}
        />
      </div>
    )
  }
}