
Security News
Open Source CAI Framework Handles Pen Testing Tasks up to 3,600× Faster Than Humans
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
react-use-wizard
Advanced tools
React wizard (stepper) builder without the hassle, powered by hooks.
A React wizard (stepper) builder without the hassle, powered by hooks.
yarn add react-use-wizard
import * as React from 'react';
import { Wizard, useWizard } from 'react-use-wizard';
const App = () => (
<Wizard>
<Step1 />
<Step2 />
<Step3 />
</Wizard>
);
const Step1 = () => {
const { handleStep, previousStep, nextStep } = useWizard();
// Attach an optional handler
handleStep(() => {
alert('Going to step 2');
});
return (
<>
<button onClick={() => previousStep()}>Previous ⏮️</button>
<button onClick={() => nextStep()}>Next ⏭</button>
</>
);
};
Wizard
is used to wrap your steps. Each child component will be treated as an individual step. You can pass a shared footer
and header
component that should always be in your steps.
Example: pass a footer component that contains a "previous" and "next" button to the wizard.
name | type | description | required | default |
---|---|---|---|---|
startIndex | number | Indicate the wizard to start at the given step | ❌ | 0 |
header | React.ReactNode | Header that is shown above the active step | ❌ | |
footer | React.ReactNode | Footer that is shown below the active stepstep | ❌ | |
onStepChange | (stepIndex) | Callback that will be invoked with the new step index when the wizard changes steps | ❌ | |
wrapper | React.React.ReactElement | Optional wrapper that is exclusively wrapped around the active step component. It is not wrapped around the header and footer | ❌ | |
children | React.ReactNode | Each child component will be treated as an individual step | ✔️ |
// Example: show the active step in the header
const Header = () => <p>I am the header component</p>;
// Example: show the "previous" and "next" buttons in the footer
const Footer = () => <p>I am the footer component</p>;
// Example: Wrap steps in an `<AnimatePresence` from framer-motion
const Wrapper = () => <AnimatePresence exitBeforeEnter />;
const App = () => {
return (
<Wizard
startIndex={0}
header={<Header />}
footer={<Footer />}
wrapper={<Wrapper />}
>
<Step1 />
<Step2 />
<Step3 />
</Wizard>
);
};
Used to retrieve all methods and properties related to your wizard. Make sure Wizard
is wrapped around your component when calling useWizard
.
handleStep
is used to attach a handler to the step, can either be async
or a sync
function. This function will be invoked when calling nextStep
.
Remark - You can't use useWizard
in the same component where Wizard
is used.
name | type | description |
---|---|---|
nextStep | () => Promise | Go to the next step |
previousStep | () => void | Go to the previous step index |
goToStep | (stepIndex: number) => void | Go to the given step index |
handleStep | (handler: Handler) => void | Attach a callback that will be called when calling nextStep . handler can be either sync or async |
isLoading | boolean | * Will reflect the handler promise state: will be true if the handler promise is pending and false when the handler is either fulfilled or rejected |
activeStep | number | The current active step of the wizard |
stepCount | number | The total number of steps of the wizard |
isFirstStep | boolean | Indicate if the current step is the first step (aka no previous step) |
isLastStep | boolean | Indicate if the current step is the last step (aka no next step) |
import * as React from 'react';
import { Wizard, useWizard } from 'react-use-wizard';
const App = () => (
<Wizard>
<Step1 />
<Step2 />
<Step3 />
</Wizard>
);
const Step1 = () => {
const {
isLoading,
isLastStep,
isFirstStep,
activeStep,
stepCount,
previousStep,
nextStep,
goToStep,
handleStep,
} = useWizard();
// This handler is optional
handleStep(() => {
alert('Going to step 2');
});
return (
<>
<p>Step 1</p>
{isLoading && <p>loading...</p>}
<button onClick={() => previousStep()}>Previous</button>
<button onClick={() => nextStep()}>Next</button>
<button onClick={() => goToStep(2)}>Go to the last step</button>
<div>
Has next step: {!isLastStep ? '✅' : '⛔'}
<br />
Has previous step : {!isFirstStep ? '✅' : '⛔'}
</div>
Active step: {activeStep + 1} <br />
</>
);
};
It's recommended to pass the shared components to the header
or footer
in the Wizard
to avoid duplication.
Small playground to showcase the functionalities of react-use-wizard
:
https://devrnt.github.io/react-use-wizard/
Following use cases are available in the playground
Source code can be found here.
Go to examples to check out some integrations (Gatsby, NextJS...).
You can attach an async step handler to a step as well. Make sure to make to either pass an async function or return a promise (async) function:
const Step1 = () => {
const { handleStep } = useWizard();
// Async function
handleStep(async () => {
await fetch(...);
});
// OR
// Return promise
handleStep(() => {
return fetch(...);
});
...
}
If no errors are thrown then the wizard will go to the next step, so no need to call nextStep
by yourself.
If an error is thrown in the attached function the wizard will just stay at the same step and will rethrow the error. (So you can try-catch in your attached function).
If an async function is attached to handleStep
the isLoading
property will indicate the loading state of the function. In general isLoading
will reflect the handler promise state: will be true
if the handler promise is pending and false
when the handler is either fulfilled or rejected.
Since react-use-wizard
is focused to manage the logic of a wizard it doesn't mean you can't add some animation by your own. Add any animation library that you like. I highly suggest framer-motion to add your animations.
Checkout this example to see how a step can be animated with framer motion.
Since Internet Explorer 11 doesn't support promises or async functions you'll need to install a polyfill for the regenerator-runtime
.
FAQs
React wizard (stepper) builder without the hassle, powered by hooks.
The npm package react-use-wizard receives a total of 33,151 weekly downloads. As such, react-use-wizard popularity was classified as popular.
We found that react-use-wizard demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.