npm install react-glamorous-tourReact-glamorous-tour
Installation
``
sh
npm install --save react-glamorous-tour
`
Usage
Using NPM1 . Require react-glamorous-tour after installation
js
import { TourProvider, Step } from "react-glamorous-tour";
`
2 . Using Step component to wrap up your target component
jsx
import { TourProvider, Step } from "react-glamorous-tour";const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
const BootstrapCard = () => (
Card title
Some quick example text to build on the card title and make up the bulk of the card's
content.
Go somewhere
);
const Step1 = Step('h2', 'step1');
const Step2 = Step(BootstrapCard,'step2');
const App = () =>
Start editing to see some magic happen {"\u2728"}
;
`
3 . Using TourProvider wrap up your root component
jsx
steps={[
{
selector: "step1",
title: "Hello world!",
text: "welcome to the first step of react-glamorous-tour"
},
{
selector: "step2",
title: "Second step!",
text: "welcome to the first step of react-glamorous-tour"
}
]}
afterConfigured={tourProvider => {
tourProvider.renderTour();
}}
>
`
Props
| Name | Description | Type | Required |
| --- | --- | :---: | :---: |
|
| Defines if the tour are visible or not.| Boolean | |
| steps | All the steps. | [Step[]](#step) | ✅ |
| onConfigure | Callback called before the steps are loaded to TourProvider | Function | |
| afterConfigured | Callback called after the steps loaded, tour is isConfigured. | Function | |
| tourBox | Callback if it's set, provider will call it and use the returned component to replace default tour step
`js
step = {
selector,
title,
text
position,
arrow,
visible = true,
positionMargin = 20,
width = '20rem',
}
`
using custom tour content box
jsx
steps={[
{
selector: "step1",
title: "Hello world!",
text: "welcome to the first step of react-glamorous-tour"
},
{
selector: "step2",
title: "Second step!",
text: "welcome to the second step of react-glamorous-tour"
}
]}
afterConfigured={tourProvider => {
tourProvider.renderTour();
}}
tourBox={(props) => {
const {
currentStepElm,
currentStep,
currentIdx,
totalStepNum,
goNext,
goPrevious,
dismiss,
done
} = props;
return
![]()
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15e3d931427%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15e3d931427%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22118.0546875%22%20y%3D%2297.2%22%3E318x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
alt="Card image cap" />
Card title
Some quick example text to build on the card title and make up the bulk of the card's
content.
}}
>
`
Using Control to get control methods of tour.
jsx
import { TourProvider, Step, Control } from "react-glamorous-tour";const ControlButton = Control((props) => {
const {
tourIsConfigured,
renderTour,
unmountTour,
goNext,
goPrevious,
dismiss,
done,
} = props;
return ;
});
class App extends Component {
render() {
return (
steps={
[
{
selector: "step1",
title: "Hello world!",
text: "welcome to the first step of react-glamorous-tour"
},
{
selector: "step2",
title: "Second step!",
text: "welcome to the second step of react-glamorous-tour"
}
]
}
>
Welcome to React
To get started, edit src/App.js and save to reload.
);
}
}export default App;
``