useStep

Hook that create stepper

state

medium

test coverage

Last changed: 7 months ago

Installation

Library

CLI

Manual

import { useStep } from '@siberiacancode/reactuse';

Usage

const stepper = useStep(5);
// or
const stepper = useStep({ initial: 2, max: 5 });

Demo

source

Api

Parameters

Name	Type	Default	Note
max	number	-	Maximum number of steps

Returns

UseStepReturn

Parameters

Name	Type	Default	Note
params.max	number	-	Maximum number of steps
params.initial	number	-	Initial value for step

Returns

UseStepReturn

Type declaration

export interface UseStepParams {
  /** Initial value for step */
  initial: number;
  /** Maximum value for step */
  max: number;
}

export interface UseStepReturn {
  /** Counts of steps */
  counts: number;
  /** Current value of step */
  currentStep: number;
  /** Boolean value if current step is first */
  isFirst: boolean;
  /** Boolean value if current step is last */
  isLast: boolean;
  /** Go to back step */
  back: () => void;
  /** Go to next step */
  next: () => void;
  /** Reset current step to initial value */
  reset: () => void;
  /** Go to custom step */
  set: (value: number | 'first' | 'last') => void;
}

Source

Source • Demo

Contributors

D

debabin

B

babin

H

hywax

L

leendrew