React 19

React 19 is the first version of React that fully supports webcomponents. This means that you can use the DÁP Design System components as you would use a normal HTML element.

Events

Every event that the webcomponent dispatches will be available as a React event, prefixed with on. For example, the dds-keydown event will be ondds-keydown.

export default function Component() {

  const handleKeyDown = (e: CustomEvent) => {
    console.log(e);
  }

  return (
    <dap-ds-input
        ondds-keydown={handleKeyDown}
        feedback="Bad bad bad!"
        feedbackType="negative">
    </dap-ds-input>
  );
}

Typing

The DÁP DS package contains a react-types.ts file, which can be used as a basic typing for the components. To make the custom tags available in your project, add the following to your global.d.ts (or any type file included in your project). React 19's automatic JSX runtime resolves intrinsic elements from the react module, so the declaration augments react (augmenting the global JSX namespace no longer works):

import 'react'

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      'dap-ds-accordion': import('dap-design-system/react-types').DapDSAccordionType
    'dap-ds-anchor-heading': import('dap-design-system/react-types').DapDSAnchorHeadingType
    'dap-ds-avatar': import('dap-design-system/react-types').DapDSAvatarType
    'dap-ds-avatar-group': import('dap-design-system/react-types').DapDSAvatarGroupType
    'dap-ds-banner': import('dap-design-system/react-types').DapDSBannerType
    'dap-ds-breadcrumb': import('dap-design-system/react-types').DapDSBreadcrumbType
    'dap-ds-accordion-group': import('dap-design-system/react-types').DapDSAccordionGroupType
    'dap-ds-badge': import('dap-design-system/react-types').DapDSBadgeType
    'dap-ds-breadcrumb-item': import('dap-design-system/react-types').DapDSBreadcrumbItemType
    'dap-ds-button': import('dap-design-system/react-types').DapDSButtonType
    'dap-ds-calendar-cell': import('dap-design-system/react-types').DapDSCalendarCellType
    'dap-ds-calendar': import('dap-design-system/react-types').DapDSCalendarType
    'dap-ds-callout': import('dap-design-system/react-types').DapDSCalloutType
    'dap-ds-card-actions': import('dap-design-system/react-types').DapDSCardActionsType
    'dap-ds-card-content': import('dap-design-system/react-types').DapDSCardContentType
    'dap-ds-card-image': import('dap-design-system/react-types').DapDSCardImageType
    'dap-ds-card-subtitle': import('dap-design-system/react-types').DapDSCardSubtitleType
    'dap-ds-card-title': import('dap-design-system/react-types').DapDSCardTitleType
    'dap-ds-card': import('dap-design-system/react-types').DapDSCardType
    'dap-ds-checkbox': import('dap-design-system/react-types').DapDSCheckboxType
    'dap-ds-chip': import('dap-design-system/react-types').DapDSChipType
    'dap-ds-code-puncher': import('dap-design-system/react-types').DapDSCodePuncherType
    'dap-ds-code-puncher-slot': import('dap-design-system/react-types').DapDSCodePuncherSlotType
    'dap-ds-combobox': import('dap-design-system/react-types').DapDSComboboxType
    'dap-ds-command': import('dap-design-system/react-types').DapDSCommandType
    'dap-ds-command-group': import('dap-design-system/react-types').DapDSCommandGroupType
    'dap-ds-command-item': import('dap-design-system/react-types').DapDSCommandItemType
    'dap-ds-content-switcher-item': import('dap-design-system/react-types').DapDSContentSwitcherItemType
    'dap-ds-content-switcher': import('dap-design-system/react-types').DapDSContentSwitcherType
    'dap-ds-copybox-input': import('dap-design-system/react-types').DapDSCopyBoxInputType
    'dap-ds-dap-badge': import('dap-design-system/react-types').DapDSBadgeType
    'dap-ds-datatable': import('dap-design-system/react-types').DapDSDataTableType
    'dap-ds-datepicker': import('dap-design-system/react-types').DapDSDatePickerType
    'dap-ds-divider': import('dap-design-system/react-types').DapDSDividerType
    'dap-ds-feedback': import('dap-design-system/react-types').DapDSFeedbackType
    'dap-ds-file-input': import('dap-design-system/react-types').DapDSFileInputType
    'dap-ds-file-input-list': import('dap-design-system/react-types').DapDSFileInputListType
    'dap-ds-file-input-list-item': import('dap-design-system/react-types').DapDSFileInputListItemType
    'dap-ds-form-label': import('dap-design-system/react-types').DapDSFormLabelType
    'dap-ds-icon': import('dap-design-system/react-types').DapDSIconType
    'dap-ds-icon-button': import('dap-design-system/react-types').DapDSIconButtonType
    'dap-ds-input': import('dap-design-system/react-types').DapDSInputType
    'dap-ds-input-group': import('dap-design-system/react-types').DapDSInputGroupType
    'dap-ds-modal': import('dap-design-system/react-types').DapDSModalType
    'dap-ds-label': import('dap-design-system/react-types').DapDSLabelType
    'dap-ds-link': import('dap-design-system/react-types').DapDSLinkType
    'dap-ds-list-item': import('dap-design-system/react-types').DapDSListItemType
    'dap-ds-navigation-menu': import('dap-design-system/react-types').DapDSNavigationMenuType
    'dap-ds-navigation-menu-item': import('dap-design-system/react-types').DapDSNavigationMenuItemType
    'dap-ds-notification-badge': import('dap-design-system/react-types').DapDSNotificationBadgeType
    'dap-ds-number-input': import('dap-design-system/react-types').DapDSNumberInputType
    'dap-ds-option-item': import('dap-design-system/react-types').DapDSOptionItemType
    'dap-ds-official-website-banner': import('dap-design-system/react-types').DapDSOfficialWebsiteBannerType
    'dap-ds-option-group': import('dap-design-system/react-types').DapDSOptionGroupType
    'dap-ds-option-list': import('dap-design-system/react-types').DapDSOptionListType
    'dap-ds-overlay': import('dap-design-system/react-types').DapDSOverlayType
    'dap-ds-pager': import('dap-design-system/react-types').DapDSPagerType
    'dap-ds-password-input': import('dap-design-system/react-types').DapDSPasswordInputType
    'dap-ds-popup': import('dap-design-system/react-types').DapDSPopupType
    'dap-ds-progress': import('dap-design-system/react-types').DapDSProgressType
    'dap-ds-radio-button': import('dap-design-system/react-types').DapDSRadioButtonType
    'dap-ds-radio-group': import('dap-design-system/react-types').DapDSRadioGroupType
    'dap-ds-scroll-area': import('dap-design-system/react-types').DapDSScrollAreaType
    'dap-ds-scroll-progress': import('dap-design-system/react-types').DapDSScrollProgressType
    'dap-ds-search': import('dap-design-system/react-types').DapDSSearchType
    'dap-ds-select': import('dap-design-system/react-types').DapDSSelectType
    'dap-ds-sidenav': import('dap-design-system/react-types').DapDSSidenavType
    'dap-ds-sidenav-group': import('dap-design-system/react-types').DapDSSidenavGroupType
    'dap-ds-sidenav-item': import('dap-design-system/react-types').DapDSSidenavItemType
    'dap-ds-skeleton': import('dap-design-system/react-types').DapDSSkeletonType
    'dap-ds-skip-link': import('dap-design-system/react-types').DapDSSkipLinkType
    'dap-ds-snackbar': import('dap-design-system/react-types').DapDSSnackbarType
    'dap-ds-snackbar-message': import('dap-design-system/react-types').DapDSSnackbarMessageType
    'dap-ds-spinner': import('dap-design-system/react-types').DapDSSpinnerType
    'dap-ds-stack': import('dap-design-system/react-types').DapDSStackType
    'dap-ds-switch': import('dap-design-system/react-types').DapDSSwitchType
    'dap-ds-tab-group': import('dap-design-system/react-types').DapDSTabGroupType
    'dap-ds-tab': import('dap-design-system/react-types').DapDSTabType
    'dap-ds-table-cell': import('dap-design-system/react-types').DapDSTableCellType
    'dap-ds-table-header': import('dap-design-system/react-types').DapDSTableHeaderType
    'dap-ds-table-row': import('dap-design-system/react-types').DapDSTableRowType
    'dap-ds-table': import('dap-design-system/react-types').DapDSTableType
    'dap-ds-textarea': import('dap-design-system/react-types').DapDSTextareaType
    'dap-ds-time-grid': import('dap-design-system/react-types').DapDSTimeGridType
    'dap-ds-timeline': import('dap-design-system/react-types').DapDSTimelineType
    'dap-ds-timeline-item': import('dap-design-system/react-types').DapDSTimelineItemType
    'dap-ds-timepicker': import('dap-design-system/react-types').DapDSTimePickerType
    'dap-ds-toc': import('dap-design-system/react-types').DapDSTOCType
    'dap-ds-toggle-button': import('dap-design-system/react-types').DapDSToggleButtonType
    'dap-ds-tray': import('dap-design-system/react-types').DapDSTrayType
    'dap-ds-tooltip': import('dap-design-system/react-types').DapDSTooltipType
    'dap-ds-typography': import('dap-design-system/react-types').DapDSTypographyType
      'dap-ds-icon-eye-line': import('dap-design-system/react-types').DapDSIconEyeLineType
    }
  }
}

Then register the components you use — import each by its own subpath so your bundle only includes what you render:

import 'dap-design-system/components/button'
import 'dap-design-system/components/input'