useRolodex.ts

import React from 'react';
import { autobind } from '@typed-decorators/autobind';

class Rolodex<T> {
  index: number;
  length: number;

  constructor(private sequence: NonEmptyArray<T>) {
    this.sequence = sequence;
    this.index = 0;
    this.length = sequence.length;
  }

  @autobind
  next(): T {
    return this.sequence[((++this.index % this.length) + this.length) % this.length]!;
  }
}

export function useRolodex<T>(initialSequence: NonEmptyArray<T>): Rolodex<T> {
  const slider = React.useRef(new Rolodex(initialSequence));

  React.useDebugValue(slider);

  return slider.current;
}