DHL Parcel Track & Trace Component.

Downloads in past


2.5.62 years ago5 years agoMinified + gzip package size for @dhl-parcel/track-and-trace in KB


DHL Parcel Track & Trace
This project is built with React and serves as a web component for usage in multiple kinds of applications.

Usage for clients

  1. Include <link type="text/css" rel="stylesheet" href="https://track-and-trace.dhlparcel.nl/track-and-trace.css"> in the HTML code of your application, preferably just before the closing </head> tag.
  2. Include <script type="text/javascript" src="https://track-and-trace.dhlparcel.nl/track-and-trace.js"></script> in the HTML code of your application, preferably just before the closing </body> tag. Alternatively, to prevent styling collisions, include <script type="text/javascript" src="https://track-and-trace.dhlparcel.nl/track-and-trace-iframe.js"></script> to load the component wrapped in an iframe instead.
  3. Add a div with id="dhl-track-and-trace-component" where you want the web component to appear.
  4. If applicable, add the following options to your div:

  data-tracking-code="some tracking code"
  data-postcode="some postcode"
  data-locale="some locale"

None of the data- attributes are required. If they are not present, the values will be extracted from the query string part of the host URL instead, where tc (or tt) maps to data-tracking-code, pc maps to data-postcode and lc maps to data-locale. In this use case, only a tc (or tt) is required, pc and lc are optional.
Valid keys for the optional data-locale are en-BE, en-ES, en-NL, en-PT, es-ES, fr-BE, nl-BE, nl-NL or pt-PT. Defaults to en-NL.
Example: https://www.example.com?tc=TRACKING_CODE&pc=POSTCODE&lc=en-NL

Usage for developers

  1. npm install @dhl-parcel/track-and-trace --save
  2. Install the required peerDependencies
  3. Add the component to your React application. NOTE: make sure you always wrap the component in a tag that contains id="dhl-track-and-trace-component", otherwise the styles will not apply (they are scoped under this id to prevent them from leaking to the rest of the app). For example:

import React from 'react'
import { render } from 'react-dom'
import TrackTraceComponent from '@dhl-parcel/track-and-trace'

    trackingCode={'your tracking code'}
    postcode={'your postcode'}

import React from 'react'
import TrackTraceComponent from '@dhl-parcel/track-and-trace'

const App = () => (
  <div id="dhl-track-and-trace-component">
      trackingCode={'your tracking code'}
      postcode={'your postcode'}

Install for development

  1. Clone the repo
  2. From the root folder run npm install
  3. Serve the app with npm start
  4. Optionally, run npm run styleguide to view the app styleguide


  • Run npm run fix:format


  • Run npm run fix:lint

Type checking

  • Optionally, run npm run flow-typed
  • Run npm run type-check
  • Optionally, run npm run flow:generate-module-name-mappers to update .flowconfig


  • Run npm test
  • Optionally, run npm run test:update to update the snapshots

Deploy for development

  1. Run npm run build
  2. Optionally, run npm run start:production to verify the build locally
  3. To test using Cypress, run steps 1 and 2 first, then npm run e2e:open


  • Pass in &env=accept to the URL to retrieve data from the accept environment
  • Pass in &debug=true to the URL to enter time travelling mode