# @ray-js/components-ty-dialog

> 涂鸦风格对话框组件

Latest version **0.1.0** (published 2025-06-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ray-js/components-ty-dialog
pnpm add @ray-js/components-ty-dialog
yarn add @ray-js/components-ty-dialog
bun add @ray-js/components-ty-dialog
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2025-06-24 |
| First published | 2022-07-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 164.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tuyafe |

## Links

- npm: https://www.npmjs.com/package/@ray-js/components-ty-dialog
- npm.io page: https://npm.io/package/@ray-js/components-ty-dialog

## Dependencies (2)

- [clsx](https://npm.io/package/clsx.md) ^1.1.1
- [shallowequal](https://npm.io/package/shallowequal.md) ^1.1.0

## Recent versions

- 0.1.0 (latest) — 2025-06-24
- 0.0.7-beta-1 (beta) — 2025-08-28
- 0.1.0-beta-3 — 2025-06-24
- 0.1.0-beta-2 — 2023-07-26
- 0.1.0-beta-1 — 2023-07-25
- 0.0.7 — 2023-05-08
- 0.0.6 — 2022-09-20
- 0.0.5 — 2022-09-01
- 0.0.4 — 2022-09-01
- 0.0.3 — 2022-07-05
- 0.0.2 — 2022-07-05
- 0.0.2-beta-0d2ea52d — 2022-07-04
- 0.0.1 — 2022-07-04
- 0.0.1-beta-e64dbe0e — 2022-07-04

## README

English | [简体中文](./README-zh_CN.md)

# @ray-js/components-ty-dialog

[![latest](https://img.shields.io/npm/v/@ray-js/components-ty-dialog/latest.svg)](https://www.npmjs.com/package/@ray-js/components-ty-dialog) [![download](https://img.shields.io/npm/dt/@ray-js/components-ty-dialog.svg)](https://www.npmjs.com/package/@ray-js/components-ty-dialog)

> 涂鸦风格对话框组件，基础库 2.3.0 以上版本开始支持，客户端有提供会话框 的 api 调用方式，如无特别业务定制需求，推荐优先使用 [showModal](https://developer.tuya.com/cn/ray/api/base-kit/show-modal)

## Installation

```sh
$ npm install @ray-js/components-ty-dialog
# or
$ yarn add @ray-js/components-ty-dialog
```

## Usage

### Dialog（Alert）

```tsx
import Dialog from '@ray-js/components-ty-dialog';

const [showSimpleAlert, setShowSimpleAlert] = React.useState(false);

<Dialog
  show={showSimpleAlert}
  title="Title"
  subTitle="Body"
  actionDataSource={[
    {
      text: <TyTypography type="title" text="确认" />,
      onClick: () => setShowSimpleAlert(false),
    },
  ]}
/>
<Button onClick={() => setShowSimpleAlert(true)}>Click me</Button>
```

### Alert

```tsx
import { Alert } from '@ray-js/components-ty-dialog';

const [showAlert, setShowAlert] = React.useState(false);

<Alert
  show={showAlert}
  title="Title"
  subTitle="Body"
  okText="确认"
  onOk={() => setShowAlert(false)}
/>
<Button onClick={() => setShowAlert(!showAlert)}>Click me</Button>
```

### Customize Icon

```tsx
import Dialog from '@ray-js/components-ty-dialog';
import TyTypography from '@ray-js/components-ty-typography';

const [showCustomIcon, setShowCustomIcon] = React.useState(false);

<Dialog
  show={showCustomIcon}
  title="Title"
  subTitle="Body"
  icon={
    <Icon style={{ textAlign: 'center' }} type="icon-warning" size={39} color="#FF4444" />
  }
  actionDataSource={[
    {
      text: <TyTypography type="title" text="确认" />,
      onClick: () => setShowCustomIcon(false),
    },
  ]}
/>
<Button onClick={() => setShowCustomIcon(true)}>Click me</Button>
```

### Dialog with Viewport（Combination）

```tsx
import { DialogContainer, DialogContent, DialogActions, DialogTitle, DialogSubTitle } from '@ray-js/components-ty-dialog';
import TyTypography from '@ray-js/components-ty-typography';

const [showViewport, setShowViewport] = React.useState(false);

<DialogContainer show={showViewport}>
  <DialogContent>
    <DialogTitle>title</DialogTitle>
    <View className={styles.viewport} />
    <DialogSubTitle>subTitle</DialogSubTitle>
  </DialogContent>
  <DialogActions
    dataSource={[
      { text: '次要按钮', onClick: () => setShowViewport(false) },
      {
        text: <TyTypography type="title" text="主要按钮" size={16} />,
        onClick: () => setShowViewport(false),
      },
    ]}
  />
</DialogContainer>
<Button onClick={() => setShowViewport(true)}>Click me</Button>
```

### hooks

> useAlert、useConfirm also supports

```tsx
import { useDialog } from '@ray-js/components-ty-dialog';
import TyTypography from '@ray-js/components-ty-typography';

const setDialogVisibleMemo = React.useCallback(() => setDialogVisible(false), []);

const { modal: dialog, setVisible: setDialogVisible } = useDialog({
  title: 'useDialog',
  actionDataSource: [
    {
      text: <TyTypography type="caption" text="取消" />,
      onClick: setDialogVisibleMemo,
    },
    {
      text: <TyTypography type="title" text="确认" />,
      onClick: setDialogVisibleMemo,
    },
  ],
});

<>
  {dialog}
  <Button onClick={() => setDialogVisible(true)}>Click me</Button>
</>;
```

---
_Source: https://npm.io/package/@ray-js/components-ty-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._