cyber-dice
Version:
Dice animation library
250 lines (188 loc) • 7.81 kB
Markdown
# cyber-dice
React dice animation library with Typescript
## 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
### **1. Dice without animation**
```js
import React from "react";
import { Dice } from "cyber-dice";
const Component = () => <Dice randomNumber={5} />;
export default Component;
```
### **2. Dice without animation with Typescript**
```js
import React, { FC } from "react";
import { Dice } from "cyber-dice";
const Component: FC = () => <Dice randomNumber={5} />;
export default Component;
```
### **3. Custom size dice**
```js
import React from "react";
import { Dice } from "cyber-dice";
const Component = () => <Dice randomNumber={5} size={100} />;
export default Component;
```
### **4. Dice with animation**
```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 (
<div>
{randomNumber}
<button type="button" onClick={clickHandler}>
Click
</button>
<DiceWithAnimation
randomNumber={randomNumber}
isAnimation={isAnim}
animationEndHandler={animationEndHandler}
/>
</div>
);
};
export default Component;
```
### **5. Custom dice with animation**
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 (
<div>
{randomNumber}
<button type="button" onClick={clickHandler}>
Click
</button>
<DiceWithAnimation
faces={["first", "second", "first", "second", "first", "second"]}
randomNumber={randomNumber}
isAnimation={isAnim}
animationEndHandler={animationEndHandler}
/>
</div>
);
};
export default Component;
```
### **6. Custom colors for dice and dice points**
Change `background-color` in css classes `.dice__color` and `.point__color`
### **7. Custom cube with animation**
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 (
<div>
{randomNumber}
<button type="button" onClick={clickHandler}>
Click
</button>
<CubeWithAnimation
sides={[
{ text: "A", textColor: "red", bgColor: "black" },
{ text: "V", textColor: "green", bgColor: "black" },
{ text: "C", textColor: "blue", bgColor: "white" },
{ text: "7", textColor: "#7bff00", bgColor: "black" },
{ text: "9", textColor: "black", bgColor: "#d607ff" },
{ text: "11", textColor: "#d607ff", bgColor: "black" },
]}
randomNumber={randomNumber}
isAnimation={isAnim}
animationEndHandler={animationEndHandler}
/>
</div>
);
};
export default Component;
```
### **8. Custom styles for cube**
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`.