A vuejs and reactjs tour component.
- vuejs component
- reactjs component
- highlight target element
- scroll to target
<link rel="stylesheet" href="./node_modules/tour-component/dist/tour.min.css" />
npm i vue-tour-component
import { Tour } from "vue-tour-component";
app.component('tour', Tour)or
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-tour-component/dist/vue-tour-component.min.js"></script><tour :data="data"
@update="update($event)">
</tour>the online demo: https://plantain-00.github.io/tour-component/packages/vue/demo
npm i react-tour-component
import { Tour } from "react-tour-component";or
<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/react-tour-component/dist/react-tour-component.min.js"></script><Tour data={this.data}
update={e => this.update(e)}>
</Tour>the online demo: https://plantain-00.github.io/tour-component/packages/react/demo
| name | type | description |
|---|---|---|
| data | TourData[] | the data of the tour |
| update | (index: number)=> void | triggered when press next or close |
type TourData = {
steps: Step[],
localStorageKey: string;
index: number;
};
type Step = {
left?: string | (() => string);
right?: string | (() => string);
top?: string | (() => string);
bottom?: string | (() => string);
direction: "left" | "right" | "top" | "bottom";
content: string;
next: string;
scrollTop?: number;
targetElementId?: string;
};// v5 vue 2
import 'vue-tour-component'
// v6 vue 3
import { Tour } from "vue-tour-component"
app.component('tour', Tour)# v5
npm i tour-component
# v6
npm i vue-tour-component
npm i react-tour-component
npm i angular-tour-component// v5
import "tour-component/vue";
import { Tour } from "tour-component/react";
import { TourModule } from "tour-component/angular";
// v6
import "vue-tour-component";
import { Tour } from "react-tour-component";
import { TourModule } from "angular-tour-component";// v5
<link rel="stylesheet" href="./node_modules/tour-component/tour.min.css" />
// v6
<link rel="stylesheet" href="./node_modules/tour-component/dist/tour.min.css" />// v4 angular AOT:
import { TourModule } from "tour-component/angular";
// v5 angular AOT:
import { TourModule } from "tour-component/aot/angular";// v4
import "tour-component/vue";
// v3
import "tour-component/dist/vue";// v2 to v3
move `index` into `data` from as a property// v1 to v2
move `index` out from `data` as a property
add `update` event