react-native-wheel-of-fortune-dp
Version:
React Native Wheel Of Fortune Component (DP fork).
100 lines (80 loc) • 3.33 kB
Markdown
# react-native-wheel-of-fortune
[](https://codeclimate.com/github/eftalyurtseven/react-native-wheel-of-fortune)
[](https://github.com/eftalyurtseven/react-native-wheel-of-fortune)
Wheel of fortune component for React Native
## Installation
Use the package manager npm and yarn to install react-native-wheel-of-fortune.
```bash
yarn add react-native-wheel-of-fortune
# or using npm
npm i react-native-wheel-of-fortune --save
```
## Dependencies
WheelofFortune is dependent on [react-native-svg](https://github.com/react-native-community/react-native-svg) and [D3-shape](https://github.com/d3/d3-shape) plugins.
## Import
```js
import WheelOfFortune from 'react-native-wheel-of-fortune'
```
## Properties
Property | Type | Default | Desc
--- | --- | --- | ---
rewards *(required)* | `Array` | - | Set Rewards
winner | `Number` | random | Set winner index
colors | `Array` | Default Colors | Segment background colors
duration *(ms)* | `Number` | 10000 | Completion time (ms)
getWinner *(required)* | `callback(value,index)` | - | Winner value and index callback function
backgroundColor | `String` | #FFFFFF | Wheel background color
borderWidth | `Number` | 2 | Wheel border width
borderColor | `String` | #FFFFFF | Wheel border color
textColor | `String` | #FFFFFF | Rewards text color
knobSize | `Number` | 20 | Knoob size
knoobSource | `Path` | knoob.png | Knoob source
playButton | `render()` | example | Render method for tap to play button
innerRadius | `Number` | 100 | Set inner radius size
innerRadius | `Number` | 100 | Set inner radius size
textAngle | `String` | horizontal | Set angle of reward text
## Usage
```js
const participants = [
'%10',
'%20',
'%30',
'%40',
'%50',
'%60',
'%70',
'%90',
'FREE',
];
const wheelOptions = {
rewards: participants,
knobSize: 50,
borderWidth: 5,
borderColor: '#000',
innerRadius: 50,
duration: 4000,
backgroundColor: 'transparent',
textAngle: 'horizontal',
knobSource: require('./assets/images/knoob.png'),
getWinner: (value, index) => {
this.setState({winnerValue: value, winnerIndex: index});
},
onRef: ref => (this.child = ref),
};
<WheelOfFortune
options={wheelOptions}
/>
<Button title="Press me" onPress={ () => { this.child._onPress() } } />
```
For more information and test go to [/Example](https://github.com/eftalyurtseven/react-native-wheel-of-fortune/tree/master/Example) folder.
## TODO
- Reset Wheel Functions
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
## Contributors
[](https://github.com/JoaquinBeceiro)
[<img src="https://avatars0.githubusercontent.com/u/50332377" width="50"/>](https://github.com/Rubinjo)
## License
[MIT](https://choosealicense.com/licenses/mit/)