Implement onRoll callback

README.md

@@ -23,6 +23,10 @@ const MyDiceApp = () => {
 
   const reactDice = useRef<ReactDiceRef>(null)
 
+  const onRoll = () => {
+    console.log("Rolling...")
+  }
+
   const rollDone = (totalValue: number, values: number[]) => {
     console.log('individual die values array:', values)
     console.log('total dice value:', totalValue)
@@ -37,6 +41,7 @@ const MyDiceApp = () => {
       numDice={2}
       ref={reactDice}
       rollDone={rollDone}
+      onRoll={onRoll}
     />
   )
 
@@ -59,6 +64,7 @@ const MyDiceApp = () => {
 |      **`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`     |
 |     **`rollDone`**      | `{String/Function}` |  `null`   | callback returns total & individual values from dice roll |
+|     **`onRoll`**      | `{Function}` |  `null`   | callback triggered when die rolls |
 |     **`rollTime`**      |     `{Number}`      |    `2`    | time in seconds for the roll animation                    |
 
 ## Provided functions

lib/DiceContainer.tsx

@@ -16,6 +16,7 @@ export type DieContainerRef = {
 
 export interface DiceContainerProps extends Omit<DieProps, 'onRollDone'> {
   numDice: number
+  onRoll?: () => void
   totalCb: (newTotalValue: number, newDiceValues: number[]) => void
 }
 

lib/Die.tsx

@@ -14,6 +14,7 @@ export interface DieProps {
   dotColor?: string
   faceColor?: string
   margin?: number
+  onRoll?: () => void 
   onRollDone: (value: number) => void
   outline?: boolean
   outlineColor?: string
@@ -32,6 +33,7 @@ const Die = forwardRef<DieRef, DieProps>(
       dotColor = '#1dff00',
       faceColor = '#ff00ac',
       margin = 15,
+      onRoll,
       onRollDone,
       outline = false,
       outlineColor = '#000000',
@@ -41,7 +43,7 @@ const Die = forwardRef<DieRef, DieProps>(
     ref
   ): JSX.Element => {
     const dieRef = useRef<HTMLDivElement>(null)
-
+    
     useImperativeHandle(ref, () => ({
       getValue: () => {
         return dieValue
@@ -62,6 +64,9 @@ const Die = forwardRef<DieRef, DieProps>(
       dieRef.current && (dieRef.current.className = `die`)
       void dieRef.current?.offsetWidth
       let roll = disableRandom ? dieValue : value || getRandomInt()
+      if (onRoll) {
+        onRoll()
+      }
       dieRef.current?.classList.add(`roll${roll}`)
       setTimeout(() => {
         setHasRolled(true)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dice-complete",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Create dice for any game and roll for totals. Complete UI and Logic",
   "main": "dist/react-dice-complete.js",
   "files": [

src/TestApp.tsx

@@ -26,6 +26,10 @@ const TestApp = () => {
     setDiceTotal(value)
   }
 
+  const handleOnRoll = () => {
+    console.log('Rolling...');
+  }
+
   const rollAll = () => {
     reactDice.current?.rollAll()
     setRolling(true)
@@ -54,6 +58,7 @@ const TestApp = () => {
         outline={outline}
         outlineColor={outlineColor}
         ref={reactDice}
+        onRoll={handleOnRoll}
         rollDone={rollDone}
         rollTime={rollTime}
         sides={sides}
@@ -71,6 +76,7 @@ const TestApp = () => {
     numDice,
     outline,
     outlineColor,
+    handleOnRoll,
     rollDone,
     rollTime,
     sides,