2.2.0 • Published 1 year ago

react-dice-complete v2.2.0

Weekly downloads
234
License
ISC
Repository
github
Last release
1 year ago

React Dice 🎲

npm version contributions welcome

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

sample dice roll

Installation

npm install react-dice-complete

Usage

import React, { useRef } from 'react'
import ReactDice, { ReactDiceRef } from 'react-dice-complete'

const MyDiceApp = () => {

  const reactDice = useRef<ReactDiceRef>(null)

  const rollDone = (totalValue: number, values: number[]) => {
    console.log('individual die values array:', values)
    console.log('total dice value:', totalValue)
  }

  const rollAll = () => {
    reactDice.current?.rollAll()
  }

  return (
    <ReactDice
      numDice={2}
      ref={reactDice}
      rollDone={rollDone}
    />
  )

}

Available Options

NameTypeDefaultDescription
defaultRoll{Number}6The number you want displayed before a roll
dieCornerRadius{Number}5Rounded radius to use for each die
dieSize{Number}60px width/height of each dice face
disableIndividual{Bool}falsedisable clicks on die to roll each individually
disabbleRandom{Bool}falsedisable random die chance and reuses current value
dotColor{String}#1eff00hex color code for the dots on the die
faceColor{String}#ff00achex color code for the face of the die
margin{Number}15margin between each die
numDice{Number}4The number of dice you wish to have
outline{Bool}falseShow a 1px outline for each face of the die
outlineColor{String}#000000hex color code for outline color if outline is true
rollDone{String/Function}nullcallback returns total & individual values from dice roll
rollTime{Number}2time in seconds for the roll animation

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.

2.2.0

1 year ago

2.0.3

2 years ago

2.0.2

2 years ago

2.1.0

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.2.1

4 years ago

1.2.0

5 years ago

1.1.0

5 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago