Gathering detailed insights and metrics for react-spin-game
Installations
npm install react-spin-gameDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Min. Node Version
>=10
Node Version
16.16.0
NPM Version
8.11.0
Score
64.3
Supply Chain
98.9
Quality
75.2
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
3
TypeScript
CSS
HTML
TypeScript (76.57%)
CSS (13.78%)
HTML (9.65%)
Developer
ahmadalrasheed
Download Statistics
Total Downloads
3,211
Last Day
2
Last Week
8
Last Month
77
Last Year
2,101
GitHub Statistics
3 Stars
6 Commits
1 Forks
1 Watching
1 Branches
1 Contributors
Maintainers
1
Package Meta Information
Latest Version
1.0.7
Package Id
react-spin-game@1.0.7
Unpacked Size
64.57 kB
Size
9.50 kB
File Count
13
NPM Version
8.11.0
Node Version
16.16.0
Publised On
23 Feb 2023
Total Downloads
Cumulative downloads
Total Downloads
3,211
Last day
0%
2
Compared to previous day
Last week
-68%
8
Compared to previous week
Last month
-53.6%
77
Compared to previous month
Last year
215%
2,101
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
29
@testing-library/jest-dom@testing-library/react@testing-library/user-event@types/jest@types/node@types/react@types/react-dom@typescript-eslint/eslint-plugin@typescript-eslint/parsermicrobundle-crlbabel-eslintcross-enveslinteslint-config-prettiereslint-config-standardeslint-config-standard-reacteslint-plugin-importeslint-plugin-nodeeslint-plugin-prettiereslint-plugin-promiseeslint-plugin-reacteslint-plugin-standardgh-pagesnpm-run-allprettierreactreact-domreact-scriptstypescript
Versions
react-spin-game
react-spin-game is a wheel of prizes game, spinning game build using reactjs
Install
1npm install --save react-spin-game
Preview
Usage
1import React, { Component } from 'react' 2 3import SpinAndWin from 'react-spin-game' 4import 'react-spin-game/dist/index.css' 5 6const freeSpinGifts = [['test1','red'], ['test2','black'], ['test3','#808080'], ['test4','blue'], ['test5','gray'], ['test6','blue']] 7 8class Example extends Component { 9 render() { 10 return <SpinAndWin data={freeSpinGifts}/> 11 } 12}
Additional properties
1interface SpinGameData { 2 data: Array<Array<string>> 3 hideButton?: boolean 4 result?: string 5 time?: number 6 minTime?: number 7 maxTime?: number 8 removeButtonEffect?: boolean 9 fontSize?: number 10 fontFamily?: string, 11 horizantalText?:boolean 12} 13
Description:
- data: data to be displayed in spin game and their background colors, as array of arrays
- Example:
[['test1','red'], ['test2','black'], ['test3','#808080'], ['test4','blue'], ['test5','gray'], ['test6','blue']]
- hideButton: indicator to display the
SPINbutton or not
- Example:
true || false
- result: the result of spining the wheel
- Example:
test1
- time: the time of the transition after the wheel is spined
- Example:
5 (any number)
minTimeandmaxTime: the minimum and maximum time for the transition, in case that you need the spin time to be random between a range of two numbers
- Example:
5 (any number)
- removeButtonEffect: indicator to stop the functionality of the
SPINbutton
- Example:
true
- fontSize: to change the font size for the text
- Example:
26
- fontFamily: to change the font family for the text
- Example:
fantasy
- horizantalText: to switch the text to be horizontal instead of vertical
- Example:
true
Hint :
you can also pass ref prop to SpinAndWin component to extract the function responsible for the spinning of the wheel, if you wish to use it on another component.
- Example:
1 2import React ,{ useRef }from 'react' 3import SpinAndWin from 'react-spin-game' 4import 'react-spin-game/dist/index.css' 5 6const freeSpinGifts = [['test1','red'], ['test2','black'], ['test3','#808080'], ['test4','blue'], ['test5','gray'], ['test6','blue']] 7const App = () => { 8 const ref = useRef<any>(null) 9 return <> 10 <SpinAndWin ref={ref} data={freeSpinGifts} /> 11 <button onClick={()=>ref.current.handleSpin()}>Spin</button></> 12} 13 14export default App 15
License
MIT © ahmadalrasheed
No vulnerabilities found.
No security vulnerabilities found.