react-cool-die v1.0.3

react-cool-die

A cool die component for rendering a 3D die in React.

The die is built entirely using DOM elements with 3D CSS transformations

The die is written in Typescript, and is fully typed

Visually, the die is very easy to style by just overriding the default styling.

npm

Requirements

• React
• Some kind of css loader

Use

To add to your project

npm install --save react-cool-die

or if you use yarn

yarn add react-cool-die

CSS must then be imported into your project, either as a side effect in Javascript

import 'react-cool-die/react-cool-die/output/theme.css';

or directly in CSS/SCSS

@import '~react-cool-die/react-cool-die/output/theme';

To use:

import * as React from 'react';
import { Die } from 'react-cool-die';

const MyCoolComponent = () => {
    const [value, setValue] = React.useState(5);
    const [rolling, setRolling] = React.useState(false);

    return <Die value={value} rolling={rolling} />;
};

MyCoolComponent takes three props

• value (number) the current value to show on the die
• rolling (boolean) whether to play the random rolling animation
• spin (function) trigger a spin - this function is asyncronous

To use with a random roll:

import * as React from 'react';
import { Die, useRandomDieRoll } from 'react-cool-die';

const MyCoolComponent = () => {
    const { rolling, value, spin } = useRandomDieRoll();

    return (
        <>
            <Die value={5} rolling={rolling} />
            <button onClick={spin}>spin</button>
        </>
    );
};

The only arg that useRandomDieRoll takes is rollTime which is the time for a roll to happen in milliseconds.

Styling

Visually, the die is very easy to style by just overriding the default styling in CSS. Certain properties will break it, so mostly stick to styling the .die-face and .point class

.die-face {
    background-color: red;
}
.die-point-wrapper .die-point {
    background-color: blue;
}

Screenshots

LOOK AT IT GO