FrontendArk

Master Frontend Interviews

  • Practice
  • Playground
  • Resource
Medium

Use Step

20mins

Implement a hook useStep(totalSteps, initialStep = 0) that manages the state of a step counter for a multi-step process.

The hook should:

  • Accept the total number of steps and an optional initial step.
  • Provide the current step.
  • Provide methods to move to the next step, prev step, reset to initial step, and setStep(n) to jump to a specific step.
  • Ensure step never goes below 0 or beyond totalSteps - 1.
  • Provide helpers isFirst and isLast to check if the current step is at the boundaries.

Example

const stepper = useStep(5); stepper.next(); console.log(stepper.step); // 1 stepper.setStep(4); console.log(stepper.isLast()); // true

Code Editor

JavaScript Function

00:00
Loading...

Test Cases

No test results yet

Click "Run" to execute tests