0.0.68 • Public • Published


    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






    npm i @dhl-parcel/dhl-servicepoint-locator

    DownloadsWeekly Downloads






    Unpacked Size

    2.12 MB

    Total Files


    Last publish


    • jandegroot
    • gerbrand
    • snkjscom
    • dhl-parcel-ci
    • toebez