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​

info

From library version 2.33.1 onwards, it is required to remove defineCustomElements and replace it with initDUIL.

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";
import { initDUIL } from "@dhl-official/react-library";

initDUIL();

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Use custom components​

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>

Want to avoid invalid prop values?​

Use the type-safe constants for consistent and reliable prop values. Learn more