React Dice

Library for creating multisided dice and rolling them. Check out the demo here.

sample dice roll

Installation

npm install react-dice-complete

Dependencies

Usage (ES6)

import React from 'react'
import ReactDice from 'react-dice-complete'
import 'react-dice-complete/dist/react-dice-complete.css'

class App extends React.Component {

  render() {
    return (
      <div>
        <ReactDice
          numDice={2}
          rollDone={this.rollDoneCallback}
          ref={dice => this.reactDice = dice}
        />
      </div>
    )
  }

  rollAll() {
    this.reactDice.rollAll()
  }

  rollDoneCallback(num) {
    console.log(`You rolled a ${num}`)
  }
)

Available Options

Name Type Default Description
rollDone {String/Function} null callback returns total & individual values from dice roll
numDice {Number} 4 The number of dice you wish to have
defaultRoll {Number} 6 The number you want displayed before a roll
outline {Bool} false Show a 1px outline for each face of the die
outlineColor {String} #000000 hex color code for outline color if outline is true
margin {Number} 15 margin between each die
faceColor {String} #ff00ac hex color code for the face of the die
dotColor {String} #1eff00 hex color code for the dots on the die
dieSize {Number} 60 px width/height of each dice face
rollTime {Number} 2 time in seconds for the roll animation
disableIndividual {Bool} false disable clicks on die to roll each individually

Provided functions

rollAll([values]): rolls all die and calls rollDone with total from roll. You can preset the values you would like the outcome to be by passing array of numbers, if not result will be random.

React Dice Complete

Complete dice rolling functionality and animations

React Dice Complete Info

⭐ Stars 41
🔗 Homepage adam-tyler.com
🔗 Source Code github.com
🕒 Last Update a year ago
🕒 Created 5 years ago
🐞 Open Issues 8
➗ Star-Issue Ratio 5
😎 Author AdamTyler