teelou teelou - 1 month ago 33
Node.js Question

Masonry does not work with jQuery in ES6?

How can I use masonry-layout with ES6?

ES6:

'use strict';

import $ from 'jquery';
import Masonry from 'masonry-layout';

class Grid {
loadMasonry() {
window.addEventListener("load", () => {
$('.grid').masonry({
// options
itemSelector: '.grid-item',
percentPosition: true,
// gutter: 10,
// columnWidth: 200
});
});
}
}


I have this error:


Grid.js:9 Uncaught TypeError: (0 , _jquery2.default)(...).masonry is
not a function


I have installed it with npm following its guide:

npm install masonry-layout


Any ideas why and how to resolve this?

EDIT:

This is how I call the class:

import Grid from './Grid';

document.addEventListener("DOMContentLoaded", function(event) {
var g = new Grid();

g.loadMasonry();
});

Answer

Using it as a jquery plugin requires more setup: you need to install a jquery-bridget library.

Then, here is a sample code on how to tie it all together from the documentation page:

var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Masonry = require('masonry-layout');
// make Masonry a jQuery plugin
jQueryBridget( 'masonry', Masonry, $ );
// now you can use $().masonry()
$('.grid').masonry({
  columnWidth: 80
});

References:

Comments