@scriptless/dice

A representational, declarative dice component system for React apps.

Quick Start

This library provides two exports: DiceInterface and Die.

Die is a simple, stateless component which renders given values. Don't worry about that now. All you need to know is that it gets the --rolling class when it's rolling, and you can target the whole component with .die and the pips with .__pip.

DiceInterface takes care of rolling, animating, and rendering your dice. It's extremely configurable, but to get started, this is all you need:

class DiceContainer extends React.Component {

  diceInterface = new DiceInterface({
    onUpdate: dice => { this.setState(() => ({ dice }))},
    diceCount: 2,
  })

  state = {
    dice: diceInterface.getInitialState()
  }

  render() {
    return (
      <div 
        className="dice-container" 
        onClick={this.diceInterface.roll}
      >
          {this.diceInterface.render()}
      </div>
    )
  }
}

To Do

• Switching to percentage-based positioning in the die svg has slowed things down, it might make sense to provide a prop for setting height and width. Ideally the svg would be friendly to css resizing (which we can do with @leiops/icon, so I think it is).