Skip to main content

Getting Started with code | React (Single Bundle)

The @dhl-official/react-library-single-bundle npm package is designed to provide the DHL User Interface Library components ready to be used in a React application. It delivers a single bundle JavaScript file that contains all the necessary components.

It is important to note that the package does not provide a lazy loading feature. This means that all the components included in the bundle will be loaded upfront when the application starts. While this ensures that all the components are readily available for use, it may result in a larger initial bundle size and potentially slower loading times.

If lazy loading is a requirement for your application, you may consider using @dhl-official/react-library. However, it is worth noting that lazy loading may require additional configuration and setup.

Overall, the @dhl-official/react-library-single-bundle package provides a convenient way to access and utilize the DHL User Interface Library components in a React application, but it does not include a built-in lazy loading feature.

Install​

npm install @dhl-official/react-library-single-bundle

Add styles​

Update your application entry-point to import the DUIL styles and register custom elements:


import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "@dhl-official/tokens/index.css";
  
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
  <App />
</React.StrictMode>
);

Use custom components​

caution

When using the @dhl-official/react-library-single-bundle package, it is not necessary to register the custom element via the defineCustomElements function. This is because the package automatically registers the custom elements for you.

Therefore, you can simply import the required components from the package and use them in your code without the need to manually register the custom elements.

info

There is a bug in the stencil code that affects the usage of @dhl-official/react-library-single-bundle.
As a result, it is necessary to manually import and execute the DHL User Interface Library global setup script.

Solution​

To address this issue, follow the steps below:

  • Import the initDUIL function from @dhl-official/stencil-library.
  • Execute the initDUIL function.

Code Snippet​

Use the following code snippet to import and execute the initDUIL function:

// workaround to bug: https://github.com/ionic-team/stencil/issues/5680
import { initDUIL } from "@dhl-official/stencil-library";
initDUIL();

This code snippet should be added to the relevant part of your codebase where the @dhl-official/react-library-single-bundle is being used.

By following these steps, you will be able to resolve the bug and ensure the proper functioning of the DHL User Interface Library.

You should now be able to use DUIL components as following within your React application:

import { DhlButton } from "@dhl-official/react-library-single-bundle";
...
<DhlButton>Button</DhlButton>