React steps

This component introduces an approach to rendering a sequence of components (steps) and collecting the data each component submits. The main idea is that each of "step" components is not aware of any others.

This is useful for multi-step forms, sequenced flows, etc.

Install

$ npm i @madappgang/react-steps

Usage

import Steps from '@madappgang/react-steps';

const OnboardingForm = function () {
  const handleStepsCompletion = function (results) {
    console.log(results); // [1, 2, 3]
  };

  return (
    <Steps onComplete={handleStepsCompletion}>
      <FirstStep data={1} />
      <SecondStep data={2} />
      <ThirdStep data={3} />
    </Steps>
  );
};

Each step component will be assigned a set of special props that can be used inside them. Here's the list of those props:

Once the last step submits it's completion the onComplete function will be called on the steps container. As a first argument there is going to be passed an array containing the data that was submitted by each of the steps. Just take a closer look at the code example up above.

Build

Install dependencies

$ npm i

Run tests

$ npm run test

Build

$ npm run build

The output will appear in the dist folder in the project's root.

License

MIT