I need to use this react-masonry example in my spfx webpart. This is my web part content;

public render(): React.ReactElement<IFooterHgProps> {
    var masonryOptions = {
    transitionDuration: 0
const divItems: JSX.Element[] = this.parentTitles.map((item: IFooterValues, i: number) => {
      return (
          <div className="footermenuwrapper">
              {item.values.map((item_: IFooter, i_: number): JSX.Element => { return (<li key={item_.Id}><a href={item_.Link}>{item_.Title}</a></li>) })}

and the error; enter image description here

Package already installed;

"npm install --save react-masonry-component"

searched many hours but couldnt solve it. how can I use it in spfx webpart(reactJs)

ts version: 2.1.5 npm: 6.9.4

  • did you npm install the masonry component ? – Gautam Sheth Feb 7 '17 at 11:33
  • @GautamSheth yes, edited post with this detail – TyForHelpDude Feb 7 '17 at 11:50

Waldek Mastykarz, one of the top SPFx gurus has shared one git repository where Masonry is used.

So based on the repository, adding the below answer

Currently there are no typings available for Masonry, so you need to use it without specific type.

In your webpart, add the below code:

import * as $ from 'jquery';  
const Masonry: any = require('masonry');  
const jQueryBridget: any = require('jquery-bridget/jquery-bridget');  
jQueryBridget('masonry', Masonry, $); 

In the config.json add the below entries:

"jquery": "https://code.jquery.com/jquery-3.1.1.min.js",
"masonry": "https://unpkg.com/masonry-layout@4.1.1/dist/masonry.pkgd.min.js",
"jquery-bridget/jquery-bridget": "https://unpkg.com/masonry-layout@4.1.1/dist/masonry.pkgd.min.js"

Your class looks as below:

export default class MasonryTestWebPart extends BaseClientSideWebPart<IMasonryTestWebPartProps> {  
  private $masonry: any = undefined;

  public render(): void {
    this.domElement.innerHTML = `

      <div class="${styles.imagesWithJQuery}"></div>`;

    const $container: JQuery = $(`.${styles.imagesWithJQuery}`, this.domElement);
    for (let i: number = 0; i < 15; i++) {
      const height: number = Math.floor(Math.random() * (200 - 100 + 1)) + 100;
      $container.append(`<img src="http://lorempixel.com/150/${height}/?d=${new Date().getTime().toString()}" width="150" height="${height}" />`);

    if (this.renderedOnce) {

    this.$masonry = ($container as any).masonry({
      itemSelector: 'img',
      columnWidth: 150,
      gutter: 10


Waldek's awesome Github repo - SPFx masonry

Clone this and after that you know

npm i
gulp serve
| improve this answer | |
  • Awesome! now going to implement it for my case, thanks! – TyForHelpDude Feb 7 '17 at 12:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.