Image version navigator

README.md

If you version images like person-1.jpg person-2.jpg, this will let you swap an img element for a Timg component, and clicking on the image cycles through previous versions.

timg.js

class Timg extends React.Component {
  state = {maxVersion: 1};
  constructor(props) {
    super(props);
    this.state.maxVersion = +props.src.match(/(\d+)\.jpg$/)[1];
    this.state.version = this.state.maxVersion;
  }
  swap = () => {
    this.setState(({version, maxVersion}) => {
      version++;
      if (version === 0 || version > maxVersion) version = 1;
      return {
        version
      };
    });
  };
  render() {
    const {src} = this.props;
    const {version} = this.state;
    return (
      <img
        onClick={this.swap}
        {...this.props}
        src={src.replace(/(\d+)\.jpg$/, version) + ".jpg"}
      />
    );
  }
}