React Dice Pro

The best React dice. Focus on optimization, customization and ease of use. Live example - react-dice-pro.ivanadmaers.com

Features

• 🚀 Optimization
• 🔌 React 16+ support
• ✅ Ease of use
• 📝 MIT license
• 📦 Lightweight
• 🔧 Well-tested
• 🎉 NextJS, GatsbyJS and RemixJS support

Installation

# Via npm:
npm i react-dice-pro

# Via yarn:
yarn add react-dice-pro

Usage

import { useState } from 'react';

import { DicePro, IDiceFace } from 'react-dice-pro';

const App = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [rollTrigger, setRollTrigger] = useState(0);
  const [targetFace, setTargetFace] = useState<null | IDiceFace>(null);

  const handlePlay = () => {
    if (isPlaying === true) {
      return;
    }

    const randomInt = getRandomInt(1, 6) as IDiceFace;

    setIsPlaying(true);

    setTargetFace(randomInt);
    setRollTrigger((prevState) => prevState + 1);
  };

  const handleRollComplete = () => {
    setIsPlaying(false);
  };

  return (
    <main>
      <h1>Roll the dice!</h1>
      <DicePro
        targetFace={targetFace}
        rollTrigger={rollTrigger}
        onRollComplete={handleRollComplete}
      />
      <button type="button" onClick={handlePlay} disabled={isPlaying}>
        Roll
      </button>
    </main>
  );
};

export default App;

Props

Where * means required

| Prop | Type | Default value | Description | |--|--|--|--| | targetFace* | null or number | - | The dice target face. Can be null or 1, 2, 3, 4, 5, 6 (The IDiceFace interface) | | rollTrigger* | number | - | The dice roll trigger. Every time the value changes the dice starts rolling | | onRollComplete | () => void | - | The callback function calls when the dice stops rolling | | soundSrc | string | - | Sound while the dice rolling. See more in the example folder | | className | string | - | The dice wrapper class name |

FAQ

🧐 Where can I find an example of how to use the package?
📣 You can find a live example on this site - react-dice-pro.ivanadmaers.com and in the example folder.

🧐 How can I customize the dice?
📣 The dice supports the className prop. You can pass it to customize the dice wrapper. The dice itself does not support customization yet.

🧐 Is it possible to use this package with SSR frameworks (NextJS, GatsbyJS, etc)?
📣 Yes, it is. The package does not use the global object window. So SSR frameworks can render it on server with no problems.

🧐 What version of React does this package support?
📣 Your versions should be:

• react >=16.0.0
• react-dom >=16.0.0
• NodeJS >=14

🧐 Are pull requests welcome?
📣 Pull requests and improvement ideas are always welcome!

How to bootstrap the project locally

1. Clone the repository

2. Run

npm ci i

npm start

The last command runs webpack build to compile our package to a dist folder

3. cd example/

4. Run

npm ci i

npm start

The last command runs webpack dev server on localhost

License

MIT

Copyright (c) 2026-present, Ivan Admaers