A Vuejs and Reactjs Tour Component

A Vuejs and Reactjs Tour Component

tour-component .A vuejs and reactjs tour component.

tour-component

A vuejs and reactjs tour component.

features

  • vuejs component
  • reactjs component
  • highlight target element
  • scroll to target
<link rel="stylesheet" href="./node_modules/tour-component/dist/tour.min.css" />

vuejs component

gzip size

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

reactjs component

gzip size

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

properties and events of the component

name type description
data TourData[] the data of the tour
update (index: number)=> void triggered when press next or close

tour data structure

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;
};

change log

// 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

Download Details:

Author: plantain-00

Source Code: https://github.com/plantain-00/tour-component

vue vuejs javascript react reactjs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

A Reactjs and Vuejs Tree Component

tree-component .A reactjs and vuejs tree component.

A Vuejs and Reactjs Select Component

select2-component A vuejs and reactjs select component

Vue vs. React: The Future of Front-End Development

In this post, we'll discuss the strengths and weaknesses of Vue.js and React.js, and also what the future holds for both in Frontend Development. Vue.js and React.js are two popular frontend JavaScript frameworks among web developers worldwide at present

A reactjs and vuejs component of file uploader

A reactjs and vuejs component of file uploader