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​

Ensure the defineCustomElements() function is called after ReactDOM.render() so that all DUIL custom elements are defined and registered in the browser's Custom Elements registry before they are used within the React components.

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 { defineCustomElements } from "@dhl-official/react-library";
  
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
  <App />
</React.StrictMode>
);
defineCustomElements();
You should now be able to use DUIL components as following within your React application:
<DhlButton>Button</DhlButton>