use-cursor

What is this?

A React hook to cycle an index within some max length

Installation

yarn add use-cursor

Usage

import React from "react";
import { useCursor } from "use-cursor";

const App: React.FC = () => {
  const { index, cursor, handlePrev, handleNext } = useCursor({ max: 10 });

  return (
    <button onClick={handleNext}>Next</button>
    <button onClick={handlePrev}>Previous</button>
    <pre>
      <code>{JSON.stringify({ index, cursor })}</code>
    </pre>
  );
};

Interface

const useCursor: ({
  max,
  initialCursor
}: {
  max: number;
  initialCursor?: number | undefined;
}) => {
  handlePrev: () => void;
  handleNext: () => void;
  cursor: number;
  index: number;
};