Necrotizing Pineapple Music

    react-step-machine
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    A hooks-based multistep wizard (what I call it a machine 😻) built for React which is flexible and easy to use.

    Huge shout out to jcmcneal for the React Step Wizard. I took inspiration from his work and built this library with hooks and functional components.

    I felt that I had to prop drill into the step components and for accessing the props outside the wrapper I needed to write some boilerplate code. I also wanted to make it easy to get access via hooks in any place in my scope of StepMachine.

    npm version

    What You Can Build

    Trying It Out!

    Click here to see a live example! See example source code: </>

    Install

    npm install react-step-machine
    ----or----
    yarn add react-step-machine
    

    Import Component

    // import StepMachine from 'react-step-machine';  (You can also import the default export and name it whatever you want)
    import { StepMachine, StepContainer, Step } from 'react-step-machine';

    TSX/JSX Syntax

    1. Add a wrapper with <StepMachine></StepMachine>.
    2. For steps add another wrapper called <StepContainer></StepContainer>.
    3. Add <Step order={1}><YourComponent></Step> to the <StepContainer></StepContainer> eachone will be treated as steps.
    4. Done for now!

    Code walk through

    <StepMachine>
    	<NavigationTitle />
    	<NavigationPreview />
    
    	{/* Steps  */}
    	<StepContainer>
    		<Step order={1} name='foo'>
    			<CustomComponent />
    		</Step>
    		<Step order={2}>step 2</Step>
    		<Step order={3}>step 3</Step>
    	</StepContainer>
    
    	{/* You will have more control with our special hooks inside components */}
    	<ActionBtn />
    </StepMachine>

    Implementations

    Get methods and store props in the ActionBtn/NavigationPreview/CustomComponent with useStepActions & useStepStore hooks.

    import { StepMachine, StepContainer, Step } from 'react-step-machine';
    
    const ActionBtn = () => {
    	const {
    		goToNamedStep,
    		goToStep,
    		firstStep,
    		lastStep,
    		nextStep,
    		previousStep,
    	} = useStepActions({
    		/**
    		 * On Step change you can do something here
    		*/
    		onStepChange: (prevStep, activeStep) => {
    			console.log(prevStep, activeStep);
    		},
    	});
    
    	const {activeNamedStep, totalSteps, activeStep} = useStepStore();
    
    	return ....TO BE CONTINUED...
    };

    You have access to the following props:

    <div>
    	<!-- Variables -->
    	<h2>Step {activeStep}</h2>
    	<h2>Step {activeNamedStep}</h2>
    	<p>Total Steps: {totalSteps}</p>
    	<!-- Methods -->
    	<p><button onClick={previousStep}>Previous Step</button></p>
    	<p><button onClick={nextStep}>Next Step</button></p>
    	<p><button onClick={()=>goToStep(2)}>Step 2</button></p>
    	<p><button onClick={()=>goToNamedStep("foo")}>Fooo</button></p>
    	<p><button onClick={firstStep}>First Step</button></p>
    	<p><button onClick={lastStep}>Last Step</button></p>
    </div>

    User-Defined Props In StepMachine

    Prop Data Type Default Required Description
    transitions object false CSS classes for transitioning between steps

    User-Defined Props In StepContainer

    Prop Data Type Default Required Description
    initialStep integer 1 false The initial step to start at.
    Style CSSProperties false Style objects css in js.
    className string false ClassNames.

    User-Defined Props In Step

    Prop Data Type Default Required Description
    order integer true It is required for maintaining the order.
    name string false Name prop for name based navigation.

    Props Accessible On Each Child Component of StepMachine with useStepStore hook

    Prop Data Type Desrciption
    classes object All classess being applied to each step
    namedSteps object All steps with names and orders
    activatedSteps object Steps That are activated with navigation
    totalSteps integer Total number of steps
    activeStep integer Step Number That is active
    activeNamedStep string Step Name That is active

    Props Accessible On Each Child Component of StepMachine with useStepActions hook

    Prop Data Type Parameters
    firstStep function N/A
    lastStep function N/A
    nextStep function N/A
    previousStep function N/A
    goToStep function integer : goToStep(3)
    goToNamedStep function string goToNamedStep('contact')

    Transitions

    The default transitions are using CSS taken from animate.css. You can override the transitions by passing in custom CSS classes to the transitions prop in <StepMachine>.

    let custom = {
    	enterRight: 'your custom css transition classes',
    	enterLeft: 'your custom css transition classes',
    	exitRight: 'your custom css transition classes',
    	exitLeft: 'your custom css transition classes',
    };
    <StepContainer transitions={custom}>...</StepContainer>;

    Initial Step

    The order of your steps in tsx/jsx will be loaded in the same order in the browser. However, you may specify which step to start on page load by using the initialStep prop. It accepts a numeric value corresponding to the step order.

    <StepContainer initialStep={3}>...</StepContainer>

    Use named steps

    Switch steps by their names we can use name.

    <StepContainer>
    	<BasicInfo name={'basic'} />
    	<ContactInfo name={'contact'} />
    	<TermsConditions /> // step-3
    </StepContainer>

    Install

    npm i react-step-machine

    DownloadsWeekly Downloads

    46

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    40.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • adiathasan