Stepper React Component


- Docs
- Example

Install

``bash
npm install --save @idui/react-stepper
`

`bash
yarn add @idui/react-stepper
`

$3

$3

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

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

return 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 }) => (
onClick={() => setStep(index)}
completed={completed}
>
{data}

)}
/>
}

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

$3

- Live version

`jsx
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 (

{...props}
items={items}
currentStepIndex={currentStep}
currentStepProgress={currentStepProgress}
renderStep={({ data, completed, index }) => (
onClick={() => {
setCurrentStepProgress(0);
setStep(index);
}}
completed={completed}
>
{data}

)}
/>

onClick={() =>
setStep(currentStep === 0 ? items.length - 1 : currentStep - 1)
}
>
Previous



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')};
;
``

$3

License

MIT © kaprisa57@gmail.com