@dhl-parcel/dhl-servicepoint-locator

    0.0.68 • Public • Published

    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

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    40

    Version

    0.0.68

    License

    UNLICENSED

    Unpacked Size

    2.12 MB

    Total Files

    11

    Last publish

    Collaborators

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