Dx-ui-react NPM

Logo

DeltaX Design System

This is a design system developed by DeltaX for building our proprietary platform.

How To Use?

DxToast

Initially, the toast was designed to detect state through a Provider, allowing it to appear based on the state. However, this approach had a limitation—it could only be used in .tsx files and not in plain .ts files. Given the nature of toasts, they are often triggered by errors in API logic, which might be separated into non-.tsx files. To address this limitation, the design was revised to implement toasts as functions, enabling them to be used universally across all file types.

export interface IDxToast extends IHandlerEvents {
  id: string;
  icon?: React.ReactNode;
  title: string;
  description?: string;
  duration?: number;
  type?: IToastType;
  isEnableManualClose?: boolean;
  align?: 'center' | 'left';
}

export interface IHandlerEvents {
  onUndo?: () => void;
  onConfirm?: () => void;
  onCloseAfter?: () => void;
}

dxToast({});

dxToast