frontend/containers/OnBoardingTour/index.tsx (view raw)
1import Joyride from 'react-joyride';
2import {useTheme} from '@material-ui/core/styles';
3import {useTranslation} from 'react-i18next';
4import useTour from '../../hooks/useTour';
5
6interface Props {}
7
8const OnBoardingTour = (props: Props) => {
9 const theme = useTheme();
10 const {t} = useTranslation();
11 const {run, steps, step, onTourChange} = useTour();
12
13 return (
14 <Joyride
15 run={run}
16 steps={steps}
17 stepIndex={step}
18 callback={onTourChange}
19 locale={t('joyride', {returnObjects: true})}
20 continuous={true}
21 showProgress={true}
22 disableScrolling={true}
23 disableScrollParentFix={true}
24 scrollToFirstStep={false}
25 floaterProps={{
26 disableAnimation: true,
27 }}
28 styles={{
29 options: {
30 primaryColor: theme.palette.primary.main,
31 },
32 tooltipContent: {
33 whiteSpace: 'pre-wrap',
34 },
35 }}
36 />
37 );
38};
39
40export default OnBoardingTour;