Dice-react-roller NPM

react-dice-roll

A highly customizable dice roll package built in react.

Use the package manager yarn to install react-dice-roll.

yarn add react-dice-roll

or using npm

npm install react-dice-roll

import Dice from 'react-dice-roll';

<Dice onRoll={(value) => console.log(value)} />

Prop	Type	Default	Description
rollingTime	number	1000	Rolling time for dice in milliseconds
onRoll	(value) => void	-	Function which receives the values between 1 - 6 after the dice roll
triggers	string[]	'click'	Accepts an array of key strings which replaces the default trigger of dice roll `onClick`. Multiple key strings can be passed as an array including the `click` to use multiple triggers for dice roll key. eg: 'Enter', 'a', 'click'
defaultValue	number (1-6)	6	Default value of the dice before rolling
size	number	250	Dimensions of the dice in pixels
sound	string	-	URL for the sound to play on dice roll
disabled	boolean	-	Whether the dice is disabled or not
faces	string[]	-	Array of image urls for custom sides of the dice
faceBg	string	-	Custom background color for the dice face
placement	top-left, top-right, bottom-left, bottom-right	-	Placement of the device if put inside a relative positioned element
cheatValue	number (1-6)	-	Cheat Value for the dice. If passed, dice will always roll to this value
externalTrigger	boolean	-	Whether to use an external button to trigger or not, use useState to set it dynamically

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

MIT

1 year ago