score:2
Accepted answer
the material-ui stepper component was not adjusting to my needs and it was becoming an obstacle. so i created my own stepper component.
i did a quick research and found this simple stepper by vicente lyrio and made my custom component from that code. here's my result: stepper with progress bars by jhonatan zuluaga you can add as many steps as you want to and it's going to work. here's the component:
function customstepper(props) {
const { steps, current, progress, classes } = props;
function stepcontent({ done, index }) {
return done ? "✓" : index + 1;
}
const progressbar = ({ current, step, progress }) => {
let value = 0;
if(current+1 === step) {
value = progress
} else if(current >= step) {
value = 100
}
return <linearprogress variant="determinate" value={value} classes={{root: classes.linearprogress, bar: classes.bar}} />
}
function renderstep(label, key) {
const { current, progress } = this;
const done = key < current;
const currentstep = key === current;
const stepclasses = classnames({
[classes.stepper__step__index]: true,
[classes.currentstep]: currentstep,
[classes.done]: done
});
return (
<li classname={classes.stepper__step} key={key}>
<div classname={classes.labelcontainer}>
<span classname={stepclasses}>
<stepcontent done={done} index={key} />
</span>
<p classname={classes.stepper__step__label}>{label}</p>
</div>
{!!key && <progressbar current={current} step={key} progress={progress} />}
</li>
)
}
return (
<ul classname={classes.stepper}>
{steps.map(renderstep, { current, progress })}
</ul>
)
}
Source: stackoverflow.com
Related Query
- How to do an Stepper with progress bars Material-ui
- Material UI Stepper using custom icon deletes the step number. how to add the number or random text back with a custom icon?
- How to test material ui autocomplete with react testing library
- How to fix `TypeError: document.createRange is not a function` error while testing material ui popper with react-testing-library?
- How do you change the Stepper color on React Material UI?
- How to build forms with material ui in react correctly
- How can i make an avatar chooser with Material UI
- How to use data attributes with Material Design React?
- How to use react-hook-form with ant design or material UI
- How to use Material UI custom theme in React with Typescript
- How to test Material UI Select Component with React Testing Library
- How can I use CSS @media for responsive with makeStyles on Reactjs Material UI?
- How to use onchange with autocomplete material ui?
- How to add custom colors name on Material UI with TypeScript?
- How to customize colors in Material UI Stepper Step?
- how to achieve multi line label with react Material UI
- How do I use Autocomplete component of Material UI with InputBase?
- Material UI v1 with Redux - How to export
- How can I use two transitions with material ui?
- How to disable past dates from today date with Material ui reactjs?
- How to override Amplify theming with Material UI
- How to use React Router with Material UI Drawer to change content on click?
- How to use button collapse with material ui accordion?
- How to use material community icons with react-native-vector-icons
- How to use Material UI custom variants in React with Typescript
- How to use Theme in material UI with React + Next.js?
- How can I style a Select from Material UI with styled components?
- Incrementing the Material Design Lite Progress bar with React
- How to fill React Grid Layout item with material UI Card
- How to test Material UI v5 components with sx props in @testing-library/react?
More Query from same tag
- I cant map array of objects eventhough it's printed in console.log
- React-router v4 unmounting when using render
- Webpack: Duplicate content found in multiple entry file
- React: Javascript filter search not working on backspace
- create-react-app doesn't work with proxy
- How do I get scss working with a react project?
- How to pass props to custom components in react-select
- React and Nginx messing up urls when using axios, incorrect API calls
- MUI DatePicker show only month, and not year or day
- using react with redux and Getting error in redux '=' expected
- Audio play() not responding in create-react-app componentDidMount
- how can i separate the two values
- Set router in ListItem button click
- Insert a React component into an array
- edit exercise component not being displayed
- Validation of textbox message:- (fill the value)
- Is there a way to configure a base url on react-query's QueryClient?
- Radio Button needs to be clicked twice to change the second time with React Hooks
- Resizable svg rect element using react
- How do I redirect to error page after receiving status 404 from API call in React?
- I created a section to move between different parts of the site with the Router by NavBar in react
- Changing the styling in MUI Table
- React hooks hover effect
- Toggling options not working with useState correctly
- Using antd Tooltip within antd Form + ReactJs
- UnhandledPromiseRejectionWarning:
- How to change a variable in the component view inside the callback function of $.ajax
- How do i update Auth0 lock logo from my React App using hooks
- Textfield Values missing while searching
- how to wait for promise resolve in array.map method?