https://github.com/souporserious/use-roving-index

Manage an active index that needs to be contained or wrapped.
https://github.com/souporserious/use-roving-index

Last synced: about 2 months ago
JSON representation

Manage an active index that needs to be contained or wrapped.

• Host: GitHub
• URL: https://github.com/souporserious/use-roving-index
• Owner: souporserious
• Created: 2020-06-25T17:57:47.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2023-10-18T10:57:47.000Z (11 months ago)
• Last Synced: 2024-05-31T10:39:33.153Z (4 months ago)
• Language: TypeScript
• Homepage:
• Size: 586 KB
• Stars: 16
• Watchers: 4
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ⌨️ use-roving-index

Manage an active index that needs to be contained or wrapped.

## Install

```bash

yarn add use-roving-index

```

```bash

npm install use-roving-index

```

## Usage

```jsx

import React from 'react'

import { useRovingIndex } from 'use-roving-index'

const items = ['Item 1', 'Item 2', 'Item 3']

function App() {

  const {

    activeIndex,

    moveActiveIndex,

    moveBackward,

    moveBackwardDisabled,

    moveForward,

    moveForwardDisabled,

  } = useRovingIndex({ maxIndex: items.length - 1 })

  return (

    <>

      
 {

          const multiplier = event.shiftKey ? 3 : 1

          switch (event.key) {

            case 'ArrowUp':

            case 'ArrowLeft':

              moveActiveIndex(-1 * multiplier)

              break

            case 'ArrowDown':

            case 'ArrowRight':

              moveActiveIndex(1 * multiplier)

              break

          }

        }}

      >

        {items.map((title, index) => (

          


            {title}

          

        ))}

      

      

        Previous

      

      

        Next

      

    >

  )

}

```