https://github.com/dzucconi/use-cursor

A React hook to cycle an index within some max length
https://github.com/dzucconi/use-cursor

cursor react react-hook typescript

Last synced: 10 days ago
JSON representation

A React hook to cycle an index within some max length

• Host: GitHub
• URL: https://github.com/dzucconi/use-cursor
• Owner: dzucconi
• License: mit
• Created: 2020-03-24T14:28:31.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-12-14T20:22:01.000Z (11 months ago)
• Last Synced: 2024-04-13T06:14:46.243Z (7 months ago)
• Topics: cursor, react, react-hook, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/use-cursor
• Size: 1.63 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-cursor

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![npm](https://img.shields.io/npm/v/use-cursor)](https://www.npmjs.com/package/use-cursor) [![Build Status](https://travis-ci.org/dzucconi/use-cursor.svg?branch=master)](https://travis-ci.org/dzucconi/use-cursor)

## What is this?

A React hook to cycle an index within some max length

## Installation

```bash

yarn add use-cursor

```

## Usage

```javascript

import React from "react";

import { useCursor } from "use-cursor";

const App: React.FC = () => {

  const { index, cursor, handlePrev, handleNext } = useCursor({ max: 10 });

  return (

    Next

    Previous

    

      {JSON.stringify({ index, cursor })}

    

  );

};

```


## Interface

```typescript

const useCursor: ({

  max,

  initialCursor

}: {

  max: number;

  initialCursor?: number | undefined;

}) => {

  handlePrev: () => void;

  handleNext: () => void;

  cursor: number;

  index: number;

};

```