@lucky-boy/lottery-table

EN: Table-oriented lottery scene optimized for dense data and quick scanning.
CN: 面向高密度名单展示、便于快速浏览的表格抽奖场景。

Features · 特性

• EN: Virtualized row updates with smooth auto-scroll transitions. / CN: 虚拟化行更新并带有平滑的自动滚动动画。
• EN: Built-in result history management (winner list, undo, clear). / CN: 内建获奖记录管理，支持撤销与清空。
• EN: Shares the same modal, control bar, and settings drawer as lottery-ui. / CN: 与 lottery-ui 共享弹窗、控制条与设置抽屉。

Installation · 安装

pnpm add @lucky-boy/lottery-table
# peer deps
pnpm add react react-dom

Usage · 使用示例

import { LotteryTable } from "@lucky-boy/lottery-table";
import type { LotteryTableConfig, User } from "@lucky-boy/lottery-table";

const users: User[] = Array.from({ length: 300 }, (_, i) => ({
  id: `user-${i}`,
  name: `员工 ${i + 1}`
}));

const config: Partial<LotteryTableConfig> = {
  tableColumns: 4,
  backgroundImageUrl: "/assets/table-bg.png"
};

export function TableDemo() {
  return <LotteryTable users={users} config={config} onWinner={(user) => console.log(user)} />;
}

Configuration Highlights · 关键配置

| Field | Description | | ----- | ----------- | | tableColumns | EN: Number of columns rendered in the table. / CN: 表格显示的列数。 | | backgroundImageUrl | EN: Optional background image beneath the canvas. / CN: 可选背景图。 | | loopBgm | EN: Control whether the BGM loops. / CN: 控制背景音乐是否循环播放。 | | autoStartNextRound | EN: Auto trigger the next round after showing results. / CN: 展示结果后自动开始下一轮。 |

Development · 本地开发

pnpm install
pnpm run build

License · 许可

MIT