React 19 - DÁP Szolgáltatások

React 19

React 19 is the first version of React that fully supports web components, enabling seamless integration with the DÁP Design System.

With React 19, you can use DÁP Design System components directly as JSX elements without any wrapper components, just like native HTML elements. This provides better performance and a more natural development experience.

Event Handling

React 19's native web component support automatically maps custom events to React props. Every event dispatched by a DÁP Design System component is available as a React event handler, prefixed with on.

Event naming convention:

Custom event: dds-keydown → React prop: ondds-keydown
Custom event: dds-change → React prop: ondds-change
Custom event: dds-input → React prop: ondds-input

import React from 'react';

export default function MyForm() {
  const handleInputChange = (e: CustomEvent) => {
    console.log('Input value changed:', e.detail?.value);
  };

  const handleKeyDown = (e: CustomEvent) => {
    console.log('Key pressed:', e.detail?.key);
  };

  const handleFormSubmit = (e: CustomEvent) => {
    e.preventDefault();
    console.log('Form submitted:', e.detail);
  };

  return (
    <form onsubmit={handleFormSubmit}>
      <dap-ds-input
        label="Username"
        placeholder="Enter your username"
        ondds-change={handleInputChange}
        ondds-keydown={handleKeyDown}
        feedback="Username is required"
        feedbackType="negative"
      />
      
      <dap-ds-button type="submit">
        Submit
      </dap-ds-button>
    </form>
  );
}

TypeScript Support

The DÁP Design System provides comprehensive TypeScript support for React 19 through the react-types.ts file. This ensures full type safety when using web components in your React application.

Adding Type Definitions

To enable TypeScript support for all DÁP Design System components, add the following type declarations to your global.d.ts file (or any .d.ts file included in your TypeScript configuration):

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

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

Usage Example

Once you've added the type definitions, you can use DÁP Design System components with full TypeScript support:

import React, { useState } from 'react';
import 'dap-design-system/dist/dds.js';
import 'dap-design-system/dist/light.theme.css';

export default function App() {
  const [inputValue, setInputValue] = useState('');
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleInputChange = (e: CustomEvent) => {
    setInputValue(e.detail?.value || '');
  };

  const handleSubmit = (e: CustomEvent) => {
    e.preventDefault();
    setIsModalOpen(true);
  };

  return (
    <div>
      <dap-ds-typography variant="h1">
        React 19 + DÁP Design System
      </dap-ds-typography>
      
      <form ondds-submit={handleSubmit}>
        <dap-ds-input
          label="Your name"
          placeholder="Enter your name"
          value={inputValue}
          ondds-change={handleInputChange}
          required
        />
        
        <dap-ds-button type="submit" variant="primary">
          Submit
        </dap-ds-button>
      </form>

      <dap-ds-modal
        open={isModalOpen}
        ondds-close={() => setIsModalOpen(false)}
      >
        <dap-ds-typography slot="header">
          Hello, {inputValue}!
        </dap-ds-typography>
        
        <p>Welcome to the DÁP Design System with React 19!</p>
        
        <dap-ds-button
          slot="footer"
          variant="secondary"
          ondds-click={() => setIsModalOpen(false)}
        >
          Close
        </dap-ds-button>
      </dap-ds-modal>
    </div>
  );
}

Benefits of React 19 Integration

No wrapper components needed - Use web components directly as JSX elements
Better performance - Direct integration without React wrapper overhead
Full TypeScript support - Complete type safety with IntelliSense
Native event handling - Automatic mapping of custom events to React props
Server-side rendering - Full SSR support with React 19
Future-proof - Built on web standards for long-term compatibility