Boiler plate for a react linear carrousel using MUI Ui library

Pedro Mejía

·

Follow

Mar 5, 2022

--

Listen

Share

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

const steps = ['Slide1', 'Slide2', 'Slide3', 'Slide4',  'Slide5 '];

export default function HorizontalLinearStepper() {
    const [activeStep, setActiveStep] = React.useState(0);
    const handleNext = () => {
        setActiveStep((prevActiveStep) => prevActiveStep + 1);
        if (activeStep === steps.length - 1){
            setActiveStep(0);
        }
    };

    const handleBack = () => {
        setActiveStep((prevActiveStep) => prevActiveStep - 1);
        if (activeStep === 0){
            setActiveStep(steps.length-1);
        }
    };

    return (
        <Box sx={{ width: '100%' }}>
                <React.Fragment>
                    <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
                    <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
                        <Button
                            color="inherit"
                            onClick={handleBack}
                            sx={{ mr: 1 }}
                        >
                            Back
                        </Button>
                        <Box sx={{ flex: '1 1 auto' }} />
                        <Button onClick={handleNext}>
                           Next
                        </Button>
                    </Box>
                </React.Fragment>
        </Box>
    );
}