react-dice-roller v1.0.5
react-dice-roller
A react component allowing you to render a dice on the screen with which the user can interact.
Install - NPM
npm i react-dice-roller
Install - Yarn
yarn add react-dice-roller
Usage
Adding a dice to your page is pretty easy, just import it and define the number of sides.
# react-dice-roller
import ReactDice from 'react-dice-roller';
<ReactDice size={20} />
<ReactDice size={12} />
<ReactDice size={10} />
<ReactDice size={8} />
<ReactDice size={6} />
<ReactDice size={4} />
Customize
You can customize several feature of the dice.
Progress bar
Default: false
You can render a progress bar on the top of the dice, by setting the property showProgress
to true.
<ReactDice size={6} showProgress />
You can also customize the styling of this progress bar, by passing a class to the property progressClassName
. Be aware, the width is set programmaticaly, so you should not define it in the class.
Roll duration
Default: 2 (seconds)
You can change the time the roll needs to finish, by setting the property. This value is in seconds and animates several cycles that start of fast and slowly end in the final value in the time set here.
<ReactDice size={6} rollSeconds={3} />
Styling
There is a default styling rendering a black and white dice with a gray and white overlay. Which you can customize any way you want, by passing in the following classes:
diceClassName
This styles the dice itself, the container div.
overlayClassName
This styles the overlay which shows the 'Roll' message.
progressClassName
This styles the progress bar.
<ReactDice
size={6}
diceClassName='myCustomDiceClass'
overlayClassName='myCustomOverlayClass'
progressClassName='myCustomProgressClass'
/>