Stepper React Component

• Docs
• Example

Install

npm install --save @idui/react-stepper

yarn add @idui/react-stepper

See props in Docs

Basic Example

import React, {  useState } from 'react'
import styled from 'styled-components';
import Stepper from '@idui/react-stepper'

function Example() {
  const [currentStep, setStep] = useState(0);
    
  return <Stepper
      items={[1, 2, 3]}
      currentStepIndex={currentStep}
      theme={{
          colors: {
              step: {
                  default: '#9552D4',
                  completed: '#580B9E',
              },
              progress: {
                  default: '#B4B4B4',
                  completed: '#11AFD9',
              },
          },
          stepSize: 50,
          progressWidth: 4,
          progressTransitionDuration: 300,
      }}
      renderStep={({ data, completed, index }) => (
          <Step
              onClick={() => setStep(index)}
              completed={completed}
          >
              {data}
          </Step>
      )}
  />
}

const Step = styled.div`
  transition: 0.3s linear color;
  transition-delay: 0.3s;
  color: ${ifProp('completed', '#11AFD9', '#FFFFFF')};
`;

Full Example

• Live version

import React, {  useState } from 'react'
import styled from 'styled-components';
import Stepper from '@idui/react-stepper'

function Example() {
    const [currentStep, setStep] = useState(0);
    const [currentStepProgress, setCurrentStepProgress] = useState(0);

    return (
        <Container>
            <Stepper
                {...props}
                items={items}
                currentStepIndex={currentStep}
                currentStepProgress={currentStepProgress}
                renderStep={({ data, completed, index }) => (
                    <Step
                        onClick={() => {
                            setCurrentStepProgress(0);
                            setStep(index);
                        }}
                        completed={completed}
                    >
                        {data}
                    </Step>
                )}
            />
            <Actions>
                <button
                    onClick={() =>
                        setStep(currentStep === 0 ? items.length - 1 : currentStep - 1)
                    }
                >
                    Previous
                </button>
                <div>Current Step: {currentStep + 1}</div>
                <button
                    onClick={() =>
                        setStep(currentStep === items.length - 1 ? 0 : currentStep + 1)
                    }
                >
                    Next
                </button>
            </Actions>
            <CurrentStepProgress>
                currentStepProgress:
                <input
                    type="range"
                    min={0}
                    max={100}
                    step={1}
                    value={currentStepProgress}
                    onChange={(e) => setCurrentStepProgress(e.target.value)}
                />
                ({currentStepProgress}%)
            </CurrentStepProgress>
        </Container>
    );
}

const Container = styled.div`
  width: 500px;
`;

const Actions = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  & > *:not(:last-child) {
    margin-right: 10px;
  }
`;

const CurrentStepProgress = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  input {
    margin-left: 10px;
  }
`;

const Step = styled.div`
  transition: 0.3s linear color;
  transition-delay: 0.3s;
  color: ${ifProp('completed', '#11AFD9', '#FFFFFF')};
`;

See more details in storybook

License

MIT © [email protected]