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
Using npm link
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