# yatra-tour-js

> Simple and lightweight site tour library

Latest version **1.0.41** (published 2020-12-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install yatra-tour-js
pnpm add yatra-tour-js
yarn add yatra-tour-js
bun add yatra-tour-js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.41 |
| Published | 2020-12-28 |
| First published | 2020-12-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mukul |
| Maintainers | mukul11a47 |

## Links

- npm: https://www.npmjs.com/package/yatra-tour-js
- Repository: https://github.com/MUKUL47/yatra-tour-js
- Homepage: https://github.com/MUKUL47/yatra-tour-js#readme
- Issues: https://github.com/MUKUL47/yatra-tour-js/issues
- npm.io page: https://npm.io/package/yatra-tour-js

## Recent versions

- 1.0.41 (latest) — 2020-12-28
- 1.0.4 — 2020-12-28
- 1.0.302 — 2020-12-24
- 1.0.301 — 2020-12-24
- 1.0.3 — 2020-12-24
- 1.0.21 — 2020-12-24
- 1.0.2 — 2020-12-24
- 1.0.1 — 2020-12-24
- 1.0.0 — 2020-12-24

## README

# A simple light weight and easy to use website tour library.</a>

### installation

#### Add CDN for default tour modal (https://npmcdn.com/yatra-tour-js@latest/yatra.css) *required*

### install package
```
npm i yatra-tour-js
```
#### or using script
```
<script src="https://npmcdn.com/yatra-tour-js@latest/index.js" type="text/javascript"></script>
```

### usage
```
const elements = [
    {
        selector : 'someclass',
        message : 'Hi there'
    }, {
        selector : 'someclass1 someclass2',
        message : 'Same message for different classes'
    }
];
const config = {padding : 10, allowSkip : false, overlayOpacity : .3};
const yatra = new YatraIntro(elements, config);
yatra.start()
```

### Optional configs

Config | Definition | Type
--- | --- | ---
padding | Padding between actual tour modal and active element | Number
allowSkip | Skip ongoing tour in between (true by default) |  Boolean
customModal | custom tour modal having %content%, %next_button% & %back_button% as HTML string | String
overlayOpacity | adjust opacity of overlay div | number

### Optional callback

```
new YatraIntro(elements, null, onUserAction.bind(this)).start()
function onUserAction(action){
    //action = next | previous | skipped | completed
}
```

### Custom tour modal template
```
    <div id="yatra-data-control" class="my-own-class">
        <div id="yatra-data-content" class="my-own-message-div-class"></div>
        <div class="my-own-modal-control-class">
            <div id="yatra-data__next">Next</div>
            <div id="yatra-data__back">Back</div>
        </div>
    </div>
```

![Demo](https://github.com/MUKUL47/yatra-tour-js/blob/main/test/tour-demo.gif "Title")

---
_Source: https://npm.io/package/yatra-tour-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._