Skip to content

useStep ​

Hook that create stepper

utilities
test coverage
Last changed: 12 days ago

Installation ​

Library
CLI
Manual
typescript
import { useStep } from '@siberiacancode/reactuse';

Usage ​

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

Demo ​

Api ​

Parameters

NameTypeDefaultNote
maxnumber-Maximum number of steps

Returns

UseStepReturn

Parameters

NameTypeDefaultNote
params.maxnumber-Maximum number of steps
params.initialnumber-Initial value for step

Returns

UseStepReturn

Type declaration ​

typescript
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 ​

B
babin
babin
D
debabin
debabin
H
hywax
hywax
L
leendrew
leendrew

Released under the MIT License.