Skip to main content

Getting Started with code | React

The @dhl-official/react-library npm package is designed to provide the DHL User Interface Library components ready to be used in a React application with the added benefit of lazy loading. This package offers a more optimized approach to loading components, resulting in improved performance and reduced initial bundle size.

With the lazy loading feature, the components are not loaded upfront when the application starts. Instead, they are loaded on-demand as they are needed. This allows for a more efficient use of network resources and faster initial loading times.

By using the @dhl-official/react-library package, you can achieve a more optimized and efficient loading experience for your React application, while still benefiting from the rich set of components provided by the DHL User Interface Library.

In alternative, you may consider using @dhl-official/react-library-single-bundle.

Install​

npm install @dhl-official/react-library

Add styles and register custom elements​

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>
);

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

<DhlButton>Button</DhlButton>

Want to avoid invalid prop values?​

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