We can create a die using react with plain CSS and framer-motion library for animating the same using the following approach:
Prerequisites:
- Knowledge of JavaScript (ES6)
- Knowledge of HTML/CSS.
- Basic knowledge of ReactJS.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app rolling-die
Step 2: After creating your project folder i.e. rolling-die, move to it using the following command:
cd rolling-die
Step 3: After creating the ReactJS application, Install the framer-motion modules using the following command:
$ npm install framer-motion
App.js: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Example:
App.js
import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import "./App.css";   // Animation properties for the container // which is the face of the die const container = {   hidden: { opacity: 1, scale: 0 },   visible: {     scale: [0, 1],     opacity: 1,     transition: {       staggerChildren: 0.5,       delayChildren: 0.5,     },   }, };   // Animation properties for the disc(s) that // denote(s) the number player gets after rolling the die const discsOnTheDie = {   hidden: { y: 20, opacity: 0 },   visible: {     y: 0,     opacity: [0.2, 1],   }, };   // Utility function to get the random number // from 1 t0 6 just like a physical die const rollTheDie = () => {   return Math.floor(Math.random() * 7 + 1); };   const App = () => {   // Managing state of randomSize aka number on the die   // using useState hook   const [randomSize, setRandomSize] = useState(rollTheDie());   const discNumbers = new Array(randomSize);     // Assigning 0 to randomSize to the array   for (var i = 0; i < discNumbers.length; i++) {     discNumbers[i] = i;   }     useEffect(() => {     // This will fire on every change of randomSize     setRandomSize(rollTheDie());   }, [randomSize]);     return (     <div>       <motion.ul         className="square-container"        variants={container}         initial="hidden"        animate="visible"      >         {/* Mapping javascript array discNumbers */}         {discNumbers.map((index) => (           <motion.li key={index} className="disc"                      variants={discsOnTheDie} />         ))}       </motion.ul>       <button         onClick={() => {           setRandomSize();         }}       >         {" "}         ROLL{" "}       </button>     </div>   ); };   export default App; |
App.css
body { Â Â overflow: hidden; Â Â width: 100vw; Â Â height: 100vh; Â Â display: flex; Â Â justify-content: center; Â Â align-items: center; Â Â background: linear-gradient(180deg, green, white); } Â Â .square-container { Â Â display: grid; Â Â width: 200px; Â Â height: 300px; Â Â border-radius: 50px; Â Â padding: 30px; Â Â gap: 20px; Â Â list-style: none; Â Â grid-template-rows: repeat(3, 1fr); Â Â grid-template-columns: repeat(2, 1fr); Â Â background: rgba(255, 255, 255, 0.2); } Â Â .disc { Â Â background: white; Â Â border-radius: 100%; Â Â justify-content: center; Â Â align-items: center; } Â Â button { Â Â text-decoration: none; Â Â display: inline-block; Â Â margin-left: 80px; Â Â border: none; Â Â color: white; Â Â padding: 15px 32px; Â Â text-align: center; Â Â font-size: 16px; Â Â font-weight: 900; Â Â border-radius: 50px; Â Â background-color: #4caf50; } |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
