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>
    )
  }
}

Remarks

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

• https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

Using npm link

• http://justjs.com/posts/npm-link-developing-your-own-npm-modules-without-tears

Setup rollup/webpack

• https://github.com/rwieruch/minimal-react-webpack-babel-setup
• https://github.com/krasimir/webpack-library-starter
• https://www.robinwieruch.de/minimal-react-webpack-babel-setup/
• https://hackernoon.com/making-of-a-component-library-for-react-e6421ea4e6c7
• https://github.com/weaveworks/ui-components
• https://github.com/casesandberg/react-color/

License

UNLICENSED © DHL