customreactjsstepwizard v0.1.0

A step wizard built with React.

code implementation

<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
    <div>
        <StepWizard onIndexChange={(index) => {
            if(index === 3) setNextDisabled(true); else setNextDisabled(false);
            if(index === 0) setPrevDisabled(true); else setPrevDisabled(false);
            }} animation={true} ref={wizardRef}>
            <div className="container">
                First Page
            </div>
            <div className="container">
                Second Page
            </div>
            <div className="container">
                Third Page
            </div>
            <div className="container">
                Fourth Page
            </div>
        </StepWizard>
        <div style={{ marginTop: '10px', textAlign: 'center' }}>
            <button disabled={prevDisabled} style={{ margin: '0 10px', display: 'inline-block' }} onClick={() => wizardRef.current?.previous()}>previous</button>
            <button disabled={nextDisabled} style={{ margin: '0 10px', display: 'inline-block' }} onClick={() => wizardRef.current?.next()}>next</button>
        </div>
    </div>
</div>

Component Props

Note: The step-wizard does not provide any built in components i.e, Buttons, Forms Elements etc.