0

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">
            <span>{item.parent}</span>
            <ul>
              {item.values.map((item_: IFooter, i_: number): JSX.Element => { return (<li key={item_.Id}><a href={item_.Link}>{item_.Title}</a></li>) })}
            </ul>
          </div>
      );
    });

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

2
  • did you npm install the masonry component ? Commented Feb 7, 2017 at 11:33
  • @GautamSheth yes, edited post with this detail Commented Feb 7, 2017 at 11:50

1 Answer 1

2

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/[email protected]/dist/masonry.pkgd.min.js",
"jquery-bridget/jquery-bridget": "https://unpkg.com/[email protected]/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.masonry('destroy');
    }

    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
1
  • Awesome! now going to implement it for my case, thanks! Commented Feb 7, 2017 at 12:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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