cyber-dice

React dice animation library with Typescript

!GitHub package.json version (subfolder of monorepo)

Installation

npm:

``sh
npm install cyber-dice
`

yarn:

`sh
yarn add cyber-dice
`

Demo with examples

https://evgenia-cyber.github.io/dice/

< Dice /> props

| Name | Type | Prop type | Default | Description |
| ------------ | :------: | :-------: | :-----: | -------------------------------------------------- |
| randomNumber | required | number | - | The number rolled on the dice - number from 1 to 6 |
| size | optional | number | 80 | Dice size in px |

< DiceWithAnimation /> props

| Name | Type | Prop type | Default | Description |
| ------------------- | :------: | :--------------: | :-----: | ---------------------------------------------------------------------------------------------------------------------------------------- |
| randomNumber | required | number | - | The side rolled on the dice - number from 1 to 6 |
| isAnimation | required | boolean | - | Animation control flag |
| animationEndHandler | required | function | - | Callback that will be executed when the animation ends. |
| size | optional | number | 80 | Dice size in px |
| faces | optional | array of strings | - | Custom faces for the dice. Strings can only have the following values: "first" or "second" or "third" or "fourth" or "fifth" or "sixth"; |

< CubeWithAnimation /> props

| Name | Type | Prop type | Default | Description |
| ------------------- | :------: | :--------------: | :-----: | ------------------------------------------------------- |
| randomNumber | required | number | - | The side rolled on the cube - number from 1 to 6 |
| isAnimation | required | boolean | - | Animation control flag |
| animationEndHandler | required | function | - | Callback that will be executed when the animation ends. |
| size | optional | number | 80 | Dice size in px |
| sides | required | array of objects | - | Custom sides for the cube. |

This object has type:

`js
{
text: string;
textColor?: string;
fontSize?: string;
bgColor?: string;
}
`

Examples

$3

`js
import React from "react";
import { Dice } from "cyber-dice";

const Component = () => ;

export default Component;
`

$3

`js
import React, { FC } from "react";
import { Dice } from "cyber-dice";

const Component: FC = () => ;

export default Component;
`

$3

`js
import React from "react";
import { Dice } from "cyber-dice";

const Component = () => ;

export default Component;
`

$3

`js
import React from "react";
import { DiceWithAnimation } from "cyber-dice";

const Component = () => {
const [randomNumber, setRandomNumber] = React.useState(1);
const [isAnim, setIsAnim] = React.useState(true);

const clickHandler = () => {
setIsAnim(true);
const newRandomNumber = Math.floor(Math.random() * 6) + 1;
setRandomNumber(newRandomNumber);
};

const animationEndHandler = () => {
setIsAnim(false);
console.log("Animation end");
};

return (


export default Component;
`

$3

To do this, you need to pass optional props faces - array of six strings. Strings can only have the following values: "first" or "second" or "third" or "fourth" or "fifth" or "sixth". This example uses custom dice with only one or two points.

`js
import React from "react";
import { DiceWithAnimation } from "cyber-dice";

const Component = () => {
const [randomNumber, setRandomNumber] = React.useState(1);
const [isAnim, setIsAnim] = React.useState(true);

const clickHandler = () => {
setIsAnim(true);
const newRandomNumber = Math.floor(Math.random() * 6) + 1;
setRandomNumber(newRandomNumber);
};

const animationEndHandler = () => {
setIsAnim(false);
console.log("Animation end");
};

return (


export default Component;
`

$3

Change background-color in css classes .dice__color and .point__color

$3

To do this, you need to pass optional props sides - array of six objects.

Object has type:

`js
{
text: string;
textColor?: string;
fontSize?: string;
bgColor?: string;
}
`

This example uses custom cube with letters and numbers in different colors.

`js
import React from "react";
import { CubeWithAnimation } from "cyber-dice";

const Component = () => {
const [randomNumber, setRandomNumber] = React.useState(1);
const [isAnim, setIsAnim] = React.useState(true);

const clickHandler = () => {
setIsAnim(true);
const newRandomNumber = Math.floor(Math.random() * 6) + 1;
setRandomNumber(newRandomNumber);
};

const animationEndHandler = () => {
setIsAnim(false);
console.log("Animation end");
};

return (


export default Component;
`

$3

Add custom styles for the every side of the cube - use css classes: .side__front, .side__back, .side__left, .side__right, .side__top, .side__bottom.

Add custom styles for the text of the cube - use css class .side__text`.