Skip to main content

Type-Safe Constants

Leveraging Type-Safe Constants for Consistent Prop Values​

Our UI components expose type-safe constants to help you assign valid values to props in a consistent manner.

Constants follow this structure: [COMPONENT].[PROPERTY].[VALUE]

Importing Constants​

You can import constants from the Stencil library and use them in your React components to ensure you're using valid values for props. This not only helps prevent errors but also provides better readability and maintainability in your code.

Animation of the usage of Type-Safe Constants
tip

You can import constants in two ways:

import { DHL_BUTTON } from "@dhl-official/stencil-library";

or

import * as DUIL_CONSTANTS from "@dhl-official/stencil-library";

const { DHL_BUTTON } = DUIL_CONSTANTS;

Usage Examples​

Basic Button​


import { DhlButton } from "@dhl-official/react-library";
import { DHL_BUTTON } from "@dhl-official/stencil-library";

<DhlButton
  size={DHL_BUTTON.SIZE.SM}
  variant={DHL_BUTTON.VARIANT.PRIMARY}
  type={DHL_BUTTON.TYPE.BUTTON}
>
  Click me
</DhlButton>

Combining Multiple Props​


import { Airport } from "@dhl-official/icons";
import { DhlButton } from "@dhl-official/react-library";
import { DHL_BUTTON } from "@dhl-official/stencil-library";

<DhlButton
  size={DHL_BUTTON.SIZE.MD}
  variant={DHL_BUTTON.VARIANT.OUTLINE}
  icon={Airport}
  iconOrientation={DHL_BUTTON.ICON_ORIENTATION.RIGHT}
>
  Click Me
</DhlButton>

Using Multiple Components​


import { DhlButton, DhlAlert } from "@dhl-official/react-library";
import { DHL_BUTTON, DHL_ALERT } from "@dhl-official/stencil-library";

<>
  <DhlButton
      size={DHL_BUTTON.SIZE.SM}
      variant={DHL_BUTTON.VARIANT.PRIMARY}
  >
      Click Me
  </DhlButton>

  <DhlAlert 
      variant={DHL_ALERT.VARIANT.TOAST} 
      bodyText="This is an alert" 
  />
</>
tip

Destructuring for Cleaner Syntax​


import { DHL_BUTTON } from "@dhl-official/stencil-library";

const { SIZE, VARIANT } = DHL_BUTTON;

<DhlButton size={SIZE.SM} variant={VARIANT.OUTLINE}>Clean syntax</DhlButton>