react-roulette-slot
TypeScript icon, indicating that this package has built-in type declarations

0.3.4 • Public • Published

ReactRouletteSlot

codecov Known Vulnerabilities DEPENDENCIES DEVDEPENDENCIES npm package npm download Total alerts Language grade: JavaScript size

基于React的轮盘抽奖程序

项目介绍

📦 安装

npm install react-roulette-slot --save
yarn add react-roulette-slot --save

🔨 示例

import APP from 'react-roulette-slot';
ReactDOM.render(<APP />, mountNode);
const action = (cb) => {
    // 发出请求, 请求成功后,调cb.
    cb({ data: 1000 });
};
const data = const data = [
    { id: 1000, img: 'http://dummyimage.com/30x30', label: 'Larry' },
    { id: 1001, img: 'http://dummyimage.com/30x30', label: 'Joseph' },
    { id: 1003, img: 'http://dummyimage.com/30x30', label: 'Paul' },
    { id: 1004, img: 'http://dummyimage.com/30x30', label: 'Ronald' },
    { id: 1005, img: 'http://dummyimage.com/30x30', label: 'Helen' },
    { id: 1006, img: 'http://dummyimage.com/30x30', label: 'Maria' },
    { id: 1007, img: 'http://dummyimage.com/30x30', label: 'Mark' },
    { id: 1008, img: 'http://dummyimage.com/30x30', label: 'Mark' },
    { id: 1009, img: 'http://dummyimage.com/30x30', label: 'Carol' },
    { id: 1010, img: 'http://dummyimage.com/30x30', label: 'Ronald' },
    { id: 1011, img: 'http://dummyimage.com/30x30', label: 'Nancy' },
    { id: 1012, img: 'http://dummyimage.com/30x30', label: 'Michelle' },
];
const App = () => {
    return (
    <ReactRouletteSlot
        data={data}
        action={action}
        size={300}
    />
}

⌨️ 本地开发

$ git clone git@github.com:wZi/ReactRouletteSlot.git
cd ReactRouletteSlot
$ yarn
$ yarn dev

🔨 测试

$ yarn test
$ yarn test:w   ## 监听变化 
$ yarn open     ## 查看代码覆盖率 

💡 Props

type ReactRouletteSlotProps = {
    // 抽奖数据
    data: RouletteSlotData;
    // 每行个数
    row?: number;
    action: ActionType;
    // 宽跟高
    width: number;
    height: number;
    BingoItem?: (props: { data: RouletteSlotDataItem }) => JSX.Element;
    LuckyButton?: () => JSX.Element;
};
属性 说明 类型 默认值
data 抽奖数据,长度必须为偶数, 建议 12 个. RouletteSlotData --
row 每行个数 number 4 
action 点击抽奖的触发的方法,  不在组件内限制请求方式. ActionType --
width 轮盘的宽度 number 300
height 轮盘的高度 number 300
BingoItem 中奖后提示内容, 要 React 组件 (props: { data: RouletteSlotDataItem }) => JSX.Element 内部实现
LuckyButton  中间抽奖按钮的样式 () => JSX.Element 内部实现

RouletteSlotData

// 数据格式
interface RouletteSlotDataItem {
    // 名称
    label: string | JSX.Element;
    // 图片
    img: string;
    // 商品 ID
    id: number;
}
type RouletteSlotData = RouletteSlotDataItem[];

ActionType:

  • data 为抽奖结果的 id
  • isWin 为是否中奖的标识符, 默认为 true
type ActionType = (
    cb({ data, isWin }{ data: number | string; isWin?: boolean }) => void
) => void;

💬 其他

功能还不完善,有任何意见和建议,欢迎提issue

Package Sidebar

Install

npm i react-roulette-slot

Weekly Downloads

3

Version

0.3.4

License

MIT

Unpacked Size

749 kB

Total Files

97

Last publish

Collaborators

  • wzi.weng