Image Shuffle component

ImageShuffle.tsx

import * as React from 'react';
import { ControlType, PropertyControls, Size } from 'framer';

interface Props extends Size {
  images: string[];
}

interface State {
  index: number;
}

export class ShuffleImage extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = {
      index: this.generateIndex(),
    };
  }

  generateIndex() {
    return Math.floor(Math.random() * this.props.images.length);
  }

  render() {
    if (!this.props.images.length)
      return (
        <div style={placeholderStyle}>Add images on property panel...</div>
      );
    return (
      <div
        onClick={() => this.setState({ index: this.generateIndex() })}
        style={{
          width: this.props.width,
          height: this.props.height,
          backgroundImage: `url("${this.props.images[this.state.index]}")`,
          backgroundRepeat: 'no-repeat',
          backgroundSize: 'contain',
          backgroundPosition: 'center',
        }}
      />
    );
  }

  static propertyControls: PropertyControls = {
    images: {
      title: 'Image',
      type: ControlType.Array,
      propertyControl: { type: ControlType.Image },
    },
  };

  static defaultProps = {
    images: [],
  };
}

const placeholderStyle: React.CSSProperties = {
  width: '100%',
  height: '100%',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  textAlign: 'center',
  backgroundColor: 'rgba(0, 159, 255, 0.3)',
  color: '#09f',
};