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, you can add the following to your global.d.ts (or any type file that is included in your project):

declare 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
  }
}

// optional
// declare module 'dap-design-system/dist/dds.js'
// declare module 'dap-design-system'