import { Meta } from '@storybook/addon-docs';
# GuidedTourProvider
This Provider is used to create a new context for the GuidedTour. The example uses a reducer to handle the state.
## Usage
``` js
import { GuidedTourProvider } from '@strapi/helper-plugin';
const initialState = {
currentStep: null,
guidedTourState: {
contentTypeBuilder: {
create: false,
success: false,
},
contentManager: {
create: false,
success: false,
},
apiTokens: {
create: false,
success: false,
},
},
isGuidedTourVisible: false,
isSkipped: false,
};
const GuidedTour = ({ children }) => {
const [{ currentStep, guidedTourState, isGuidedTourVisible, isSkipped }, dispatch] = useReducer(
reducer,
initialState,
init
);
const setCurrentStep = step => {
// currentStep format: 'contentTypeBuilder.create'
return dispatch({
type: 'SET_CURRENT_STEP',
step,
});
};
const setGuidedTourVisibility = value => {
dispatch({
type: 'SET_GUIDED_TOUR_VISIBILITY',
value,
});
};
const setStepState = (currentStep, value) => {
dispatch({
type: 'SET_STEP_STATE',
currentStep,
value,
});
};
const startSection = sectionName => {
// Add conditions for the section to start, which will allow the ModalGuidedTour to be visible
return setCurrentStep(`${sectionName}.${step-to-show}`);
};
const setSkipped = value => {
dispatch({
type: 'SET_SKIPPED',
value,
});
};
return (
{children}
);
};
```