Utils for using the parcelLab js plugin with different frameworks (react/vue) and as web-component.
Check out the documentation on the parcelLab track & trace JS plugin beforehand to see what options are available.
First install the @parcellab/js-plugin-utils package:
npm i @parcellab/js-plugin-utils
For usage with react/next/... : (React needs to be installed...)
import TrackAndTrace from '@parcellab/js-plugin-utils/v5/react'
export default function MyPageComponent() {
const options = {...}
// ...
return(
<div>
{/* ... */}
<TrackAndTrace options={options} />
</div>
)
}If needed, you can still reference the older plugin's version:
import TrackAndTrace from '@parcellab/js-plugin-utils/v3/react'
For usage with vue/nuxt/... : (Vue needs to be installed...)
<template>
<TrackAndTrace :options="{...}" />
</template>
<script>
import TrackAndTrace from '@parcellab/js-plugin-utils/v5/vue'
export default {
components: {
TrackAndTrace
}
}
</script>If needed, you can still reference the older plugin's version:
import TrackAndTrace from '@parcellab/js-plugin-utils/v3/vue'
For usage directly within your web application or web page:
On your application's main js file, you can directly import the web component dependency.
import "@parcellab/js-plugin-utils/v5/web";And later run it from the HTML file where your app's bundled js will be included
<!DOCTYPE html>
<html lang="en">
<head>
<script src="your-app-bundle.min.js"></script>
</head>
<body>
<track-and-trace></track-and-trace>
</body>
</html>Otherwise, you can simply import directly from our CDN
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://cdn.parcellab.com/js/v5/web-components/oder-status.js"></script>
</head>
<body>
<track-and-trace></track-and-trace>
</body>
</html>For customisation, options can be defined and attached to the window object. This should happen before the component is initialised. Ex:
<body>
<script>
window.parcelLabTrackAndTraceOptions = {} // options object goes here
</script>
<track-and-trace />
</body>The older plugin's version is not available as a web component.
These components are built to automatically pull the newest version of our prebuilt Style Sheets from our CDN.
If you would like to omit these and build your own styles - you can disable the fetching by setting the param disableDefaultStyles to true.
import TrackAndTrace from '@parcellab/js-plugin-utils/v5/react'
export default function MyPageComponent() {
const options = {...}
// ...
return(
<div>
{/* ... */}
<TrackAndTrace options={options} disableDefaultStyles={true} />
</div>
)
}window.disableDefaultStyles = true;With the release of the major version 1.0.0, the import paths have changed. It is now required that the plugin's version is specified within the path. Ex:
| Before | Now |
|---|---|
| import TrackAndTrace from '@parcellab/js-plugin-utils/react' | import TrackAndTrace from '@parcellab/js-plugin-utils/v5/react' |
Vue 2.0 is also no longer supported, instead you should now use Vue 3.0.