@dhl-parcel/dhl-servicepoint-locator

DHL Servicepoint Locator

Stats

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

Readme

dhl-servicepoint-locator

DHL Servicepoint Locator

NPM JavaScript Style Guide

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

Using npm link

Setup rollup/webpack

License

UNLICENSED © DHL

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.