Getting Started with code | React Legacy

Import DUIL Custom Elements

To install the DHL User Interface Library into your React application, import the following into your application entry-point:

import { defineCustomElements } from "@dhl-official/ui-libraries/react-library";

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.

Example usage in React with Vite

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "@dhl-official/ui-libraries/duil-styles-all.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>