DHL Servicepoint Locator


0.0.68a year ago3 years agoMinified + gzip package size for @dhl-parcel/dhl-servicepoint-locator in KB



DHL Servicepoint Locator

NPM JavaScript Style Guide


Desktop Mobile

Code example (with vanilla javascript)



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


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.


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

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

  render() {
    return (
          onChange={parcelshop =>
              selected: parcelshop.id
          tr={value => value}


Installing flow types with flow-typed install results in a bug in flow-typed.

UNCAUGHT ERROR: Error: Found react listed twice in package.json!

To fix it you have to temporary clean the peerDependencies befor you install flowtypes.

Interesting reads

Rollup vs webpack

Using npm link

Setup rollup/webpack



If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.