npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@dhl-parcel/track-and-trace

v2.5.6

Published

DHL Parcel Track & Trace Component.

Downloads

249

Readme

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:
<div
  id="dhl-track-and-trace-component"
  data-tracking-code="some tracking code"
  data-postcode="some postcode"
  data-locale="some locale"
></div>

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'

render(
  <TrackTraceComponent
    trackingCode={'your tracking code'}
    postcode={'your postcode'}
    locale="en-NL"
  />,
  document.getElementById('dhl-track-and-trace-component')
)

or:

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

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

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

Formatting

  • Run npm run fix:format

Linting

  • 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

Testing

  • 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

Notes

  • 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