react-roulette-slot
Version:
ReactRouletteSlot 基于React的轮盘抽奖器
140 lines (116 loc) • 5.76 kB
Markdown
<h1 align="center">ReactRouletteSlot</h1>
<div align="center">
[](https://travis-ci.org/wZi/ReactRouletteSlot) [](https://codecov.io/gh/wZi/ReactRouletteSlot)
[](https://snyk.io/test/github/wZi/ReactRouletteSlot?targetFile=package.json)
[](https://david-dm.org/wzi/ReactRouletteSlot)
[](https://david-dm.org/wzi/ReactRouletteSlot?type=dev)
[](https://www.npmjs.com/package/react-roulette-slot)
[](https://www.npmjs.com/package/react-roulette-slot)
[](https://lgtm.com/projects/g/wZi/ReactRouletteSlot/alerts/)
[](https://lgtm.com/projects/g/wZi/ReactRouletteSlot/context:javascript)
[](https://www.npmjs.com/package/react-roulette-slot)
[](https://www.npmjs.com/package/react-roulette-slot)
</div>
<p align="center"><img width="250" src="https://ws1.sinaimg.cn/large/698831c8gy1fz9g2c17vfj209x09zdgr.jpg" /></center>
<div align="center">基于React的轮盘抽奖程序
<div><a href='https://wzi.github.io/ReactRouletteSlot/'>在线Demo</a></div></div>
---
## 项目介绍
## 📦 安装
```bash
npm install react-roulette-slot --save
yarn add react-roulette-slot --save
```
## 🔨 示例
```tsx
import APP from 'react-roulette-slot';
ReactDOM.render(<APP />, mountNode);
```
```tsx
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}
/>
}
```
## ⌨️ 本地开发
```bash
$ git clone git@github.com:wZi/ReactRouletteSlot.git
$ cd ReactRouletteSlot
$ yarn
$ yarn dev
```
## 🔨 测试
```bash
$ yarn test
$ yarn test:w ## 监听变化
$ yarn open ## 查看代码覆盖率
```
## 💡 Props
```typescript
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
```jsx
// 数据格式
interface RouletteSlotDataItem {
// 名称
label: string | JSX.Element;
// 图片
img: string;
// 商品 ID
id: number;
}
type RouletteSlotData = RouletteSlotDataItem[];
```
### ActionType:
- data 为抽奖结果的 id
- isWin 为是否中奖的标识符, 默认为 true
```typescript
type ActionType = (
cb: ({ data, isWin }: { data: number | string; isWin?: boolean }) => void
) => void;
```
## 💬 其他
功能还不完善,有任何意见和建议,欢迎提[issue](https://github.com/wZi/ReactRouletteSlot/issues)