Barry Michael Doyle Barry Michael Doyle - 2 months ago 13
jQuery Question

Generating QR codes using steeve:jquery-qrcode

I am working on a meteor project where I want to assign each user a qr code.
I've done some research and have found out that the

steeve:jquery-qrcode
(found here: https://atmospherejs.com/steeve/jquery-qrcode) is a way of doing this.

Unfortunately I can't find any information on how to use this package. Am I missing something? Because the ReadMe file doesn't show much on the use of this package.

Otherwise is there a better package to use to generate qr codes in meteor projects?

Answer

this package just import the original jquery-qrcode. You can find the instructions here: https://github.com/jeromeetienne/jquery-qrcode.

// basic usage:
$('selector').qrcode({text: 'some string'});

If you have to generate the qrcode without using a reactive data source you can call the code on Template.YourTemplate.onRendered()

Template.YourTemplate.onRendered(function () {
  $('selector').qrcode({text: 'some string'});
});

but if you have to dynamically change the qrcode you could do something like this:

<template name="hello">
  <div class="testqrcode" data-qrcode="{{someReactiveData}}"></div>
</template>

if (Meteor.isClient) {
  var counter = new ReactiveVar(0);

  Meteor.setInterval(function () {
    counter.set(counter.get() + 10);
  }, 300);

  Template.hello.helpers({
    someReactiveData: function () {
      Tracker.afterFlush(function () {
        $('.testqrcode').each(function (i, e) {
          $(e)
            .empty()
            .qrcode({text: $(e).attr('data-qrcode')});
        });
      });
      return Meteor.absoluteUrl() + counter.get();
    }
  });
}

DEMO of reactive example here

Comments