how to use intro.js form npm package in meteor 1.4.1.1?

Question

I am trying to use intro.js in my meteor Application.

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
// import introJs  from 'intro.js';
var introJs = require('intro.js');
import './main.html';

.....//some code here

Template.hello.events({
  'click button'(event, instance) {
    // increment the counter when button is clicked
    instance.counter.set(instance.counter.get() + 1);
  },

'click #introjs'(e,i){
    console.log("call me");
    introJs("#introjs").start();
  }
});

but I give

TypeError: introJs is not a function

How do I solve this problem? thanks.

Answer 1

Try: introJs.introJs().start(). That will do. It's because of how the intro.js file code is written, check it with a console.log() on your introJs var. More on this: Why does require('intro.js') export an object with just introJs?

Answer 2

On your html file you have to add a intro element like data-intro onto your html elements wherever you want intro to handle.

<template name=hello>
    <a href='http://google.com/' class='introjsclass' data-intro='Hello step one!'></a>
</template

On your js file make sure to import intro.js and intro.css

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import introJs  from 'intro.js';
//var introJs = require('intro.js');
// you have to import the introjs css file
import '/node_modules/path to your introjs css file';
import './main.html';

.....//some code here

Template.hello.events({


'click .introjsclass':function(event){
event.preventDefault();
    console.log('call me');
    introJs('.introjsclass').start();
  }
});