Package Exports

@tkwant/react-steps
@tkwant/react-steps/dist/Stepper.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@tkwant/react-steps) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Stepper

React Stepper which can also be used on mobile devices

Npm Package: https://www.npmjs.com/package/@tkwant/react-steps

Demo: https://stepper.tkwant.de

Installation

yarn add @tkwant/react-steps

npm i @tkwant/react-steps

Usage

import React, { useState } from "react";
import { Stepper, Step } from "@tkwant/react-steps";
interface Props {}
const App: React.FC<Props> = () => {
  const [curStep, setCurStep] = useState(0);
  const [step2Data, setStep2Data] = useState("");
  const renderContent = () => {
    switch (curStep) {
      case 0:
        return (
          <div style={{ display: "flex", justifyContent: "center" }}>
            First Step
          </div>
        );
      case 1:
        return (
          <div style={{ display: "flex", justifyContent: "center" }}>
            <p style={{ marginRight: 2 }}>My Validation: </p>
            <input
              style={{ border: "2px solid red" }}
              onChange={(e) => setStep2Data(e.currentTarget.value)}
              value={step2Data}
            />
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <>
      <Stepper
        style={{ padding: 10 }}
        curStep={curStep}
        setCurStep={setCurStep}
      >
        <Step label="Step 0 " />
        <Step label="Step 1" />
        <Step locked={step2Data === ""}>??</Step>
        <Step locked={curStep < 2} />
        <Step locked={curStep < 3} />
        <Step locked={curStep < 4} />
        <Step locked={curStep < 5} />
      </Stepper>
      {renderContent()}
    </>
  );
};

export default App;

Stepper Props

Prop	Description	Default
children
curStep
setCurStep
className	optional	""
activeColor	optional	"#0b294b"
inActiveColor	optional	"#D1D5DB"
borderColor	optional	"#8fb3db"
stepSize	optional	60
progressBarActiveColor	optional	"green"
progressBarBackgroundColor	optional	"lightgray"
smallScreenShowProgressbar	optional	true
style	optional	{}

Step Props

Prop	Description	Default
children	optional	current Index
label	optional	""
locked	optional	false