use-range-iterator

iterates from start value to end value

Install

yarn add @gdo-bzh/use-range-iterator react
# or
npm i @gdo-bzh/use-range-iterator react

Usage

import React from 'react'

const Example = () => {
  const { value, next, previous } = useRangeIterator({ start: 0, end: 10 })

  ...
}

Types

export type State = {
  /**
   * start value
   */
  start: number
  /**
   * end value
   */
  end: number
  /**
   * current value
   */
  value: number
  /**
   * the number of values to navigate at a time
   */
  step: number
  /**
   * true will make navigation cycling
   */
  loop: boolean
}

export enum ActionType {
  /**
   * iterates to previous value
   */
  PREVIOUS,
  /**
   * iterates to next value
   */
  NEXT
}

export type Action = {
  type: ActionType.PREVIOUS | ActionType.NEXT
  payload?: any
}

export type RangeIteratorReducer = React.Reducer<State, Action>

/**
 * hook type
 */
export type UseRangeIterator = {
  (initialState: Partial<Omit<State, 'value'>>, reducer?: RangeIteratorReducer): {
    loop: State['loop']
    step: State['step']
    value: State['value']
    /**
     * returns true if the iteration has more values
     */
    hasNext: boolean
    /**
     * returns true if the iteration has more values
     */
    hasPrevious: boolean
    /**
     * iterates to the next value
     */
    next: () => void
    /**
     * iterates to the previous value
     */
    previous: () => void
  }
  defaultReducer: RangeIteratorReducer
}

License

MIT © gdo-bzh