Hi there,

Getting this warning when I'm just returning an array of containing images.

Warning: Prop className did not match. Server: "xmasonry xmasonry-static" Client: "xmasonry"

Wondering if this is known.

Hi,

Tried to use your library but the components are not rendering. Also I'm using VS Code and it can't find the definition for the XMasonry and XBlock components when I import them.

Basically I have this:

import { XMasonry, XBlock } from 'react-xmasonry';

/* ... */
return (
  <XMasonry>
    <XBlock>
      <Something />
    </XBlock>
    <XBlock>
      <Something />
    </XBlock>
  </XMasonry>
)

But the "Something" components are not appearing on screen. I'm using the React Dev Tools and the components are also not appearing there, and it doesn't throw any errors in the console. It's like is not in my code but I'm really sure I'm doing things right and the simple as I can.

Some pics:

After addingimport { XMasonry, XBlock } from "react-xmasonry"; to a component, I get the following error:

Uncaught Error: Cannot find module 'React'
    at makeMissingError (modules-runtime.js?hash=8587d18…:231)
    at require (modules-runtime.js?hash=8587d18…:241)
    at n (modules.js?hash=2355269…:220189)
    at index.js (modules.js?hash=2355269…:220189)
    at fileEvaluate (modules-runtime.js?hash=8587d18…:343)
    at require (modules-runtime.js?hash=8587d18…:238)
    at PinBoard2.js (PinBoard2.js:1)
    at fileEvaluate (modules-runtime.js?hash=8587d18…:343)
    at require (modules-runtime.js?hash=8587d18…:238)
    at routes.js (routes.js:1)

Any insight on why this might be happening?

Hi,

I want to set the number of columns AND block width responsively so it always fills 100% of the container width

Currently, I've tried to implement this by manipulating targetBlockWidth but it doesn't work reliably.

  // Using variable columnWidth`
      <XMasonry targetBlockWidth={columnWidth} responsive={false}>`
       {items}
     </XMasonry>

    const [columnWidth, setColumnWidth] = useState(300);
    // Setting responsive column widths where sizes.width is the container width
    const getWidth = () => {
      if (sizes.width < 480) {
        setColumnWidth(Math.floor(sizes.width / 2));
      } else if (sizes.width < 640) {
        setColumnWidth(Math.floor(sizes.width / 3));
      } else if (sizes.width < 1280) {
        setColumnWidth(Math.floor(sizes.width / 4));
      } else if (sizes.width < 1536) {
        setColumnWidth(Math.floor(sizes.width / 5));
      } else if (sizes.width >= 1536) {
        setColumnWidth(Math.floor(sizes.width / 6));
      }
    };
    // Updating the variable on window resize
    useEffect(() => {
      function handleResize() {
        getWidth();
      }
      window.addEventListener("resize", handleResize);
      return (_) => {
        window.removeEventListener("resize", handleResize);
      };
    });

I was wondering if such a feature can be implemented natively? or if I'm missing a straightforward way to do this. I'm still a little new to react, so any help would be appreciated. Thanks a lot for this layout it works great in everything else.

What would be awesome is if the number of columns for certain breakpoints could be set in the XMasonry component itself and have the column width be automatically calculated. Something like this <XMasonry columns={{ 480: 2, 768: 3, 1280: 4, 1536: 6 }}>

Good Day. I noticed that many others in the past solve issues by importing the dist/index.js, but as you've pointed out, it bloats the package size as well as potentially not having a complete map?

Full error:

 `
 ModuleParseError: Module parse failed: Unexpected token (13:24) You may need an appropriate loader to handle this file type.

 // };    
 
 static defaultProps = {    

     width: 1,    
     measured: false    

`

When I import the full path import { XMasonry, XBlock } from 'react-xmasonry/dist/index.js' the error disappears.

v 2.5.5

Hey there, We're trying this with this starter kit https://github.com/kriasoft/react-starter-kit. The issue that we're having is that we get an empty div when the client renders. If we disable Javascript, we get all the <XBlock> items. With Javascript enabled we see the first load on the server and then all content disappears. We wrapped the content in a div (display block) as you suggest in #2

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) <div class="xmasonry" style="position:re
 (server) <div class="xmasonry xmasonry-static" st

Any ideas what could be the issue?

Thanks!

Hi,

I've integrated this masonry into my Ionic React project. On the page load, cards are not displayed. When I adjust the page screen size, it will appear. I don't know what the was issue.

When I check the DOM it was empty.

<div class="xmasonry" style="position: relative; height: 0px;"></div>

I love this feature after resize, by default it didn't load. 😞

Hey ZitRos. Thanks for providing this wonderful thing. I'm using this in my electron + react project :)

I'm trying to get the number of columns with this.xMasonry.columns. It works great on load. But I'm having trouble trying to get the number when user resized the window as there's no callback method on resize. Is there a way to retrieve the number when the column count changed?

Reproduction:

import React from 'react';
import { mount } from 'enzyme';
import { XMasonry, XBlock } from 'react-xmasonry';

describe('Grid', () => {

  it('Render the <XBlock /> child components', () => {
    const masonry = mount(<XMasonry>
      <XBlock key={1}>
        <div> hello </div>
      </XBlock>
      <XBlock key={2}>
        <div> grid </div>
      </XBlock>
    </XMasonry>);

    console.log(masonry.debug());

    expect(masonry.children().length).toEqual(2);
  });

});

The output (I run the tests with jest):

 FAIL  tests/Grid.test.js
  Grid
    ✕ Render the <XBlock /> child components (5ms)

  ● Grid › Render the <XBlock /> child components

    expect(received).toEqual(expected)

    Expected value to equal:
      2
    Received:
      1

      at Object.<anonymous> (tests/Grid.test.js:63:39)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

  console.log tests/Grid.test.js:61
    <t center={true} maxColumns={Infinity} responsive={true} smartUpdate={true} smartUpdateCeil={Infinity} targetBlockWidth={300} updateOnFontLoad={true} updateOnImagesLoad={true}>
      <div className="xmasonry" style={{...}} />
    </t>
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.365s, estimated 1s

As you can see I am also trying to log the rendered tree to the console, but it looks like this:

<t center={true} maxColumns={Infinity} responsive={true} smartUpdate={true} smartUpdateCeil={Infinity} targetBlockWidth={300} updateOnFontLoad={true} updateOnImagesLoad={true}>
    <div className="xmasonry" style={{...}} />
</t>

and does not render the <XBlock> components or the children

Hello @ZitRos , I'm getting an error when mixing an XBlock to a map of XBlocks.

Here is simple code to reproduce the issue:

render() {
    const data = [1, 2, 3, 4, 5];
    return (
      <XMasonry>
        <XBlock key={0}>
          <div className="card">
            <h1>Card #{0}</h1>
            <p>Any text!</p>
          </div>
        </XBlock>
        {data.map(number =>
          <XBlock key={number}>
            <div className="card">
              <h1>Card #{number}</h1>
              <p>Any text!</p>
            </div>
          </XBlock>
        )}
      </XMasonry>
    );
  }
}

This will produce the following error in the console:

 Uncaught TypeError: Cannot read property 'displayName' of undefined
    at getDisplayName (modules.js?hash=d3a0317…:3230)
    at Object.getCurrentStackAddendum (modules.js?hash=d3a0317…:3340)
    at validateExplicitKey (modules.js?hash=d3a0317…:2918)
    at validateChildKeys (modules.js?hash=d3a0317…:2938)
    at Object.createElement (modules.js?hash=d3a0317…:3026)
    at XMasonry.render (XMasonry.jsx:385)
    at modules.js?hash=d3a0317…:18044
    at measureLifeCyclePerf (modules.js?hash=d3a0317…:17323)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (modules.js?hash=d3a0317…:18043)
    at ReactCompositeComponentWrapper._renderValidatedComponent (modules.js?hash=d3a0317…:18070)  

Any idea what might be causing this?

I can't find a way to set the minimum size of the content of an XBlock.

Trying to use min-width on either the XBlock, its direct child, or any nested children results in the XBlocks overlapping.

Is there any easy way to implement a minimum width for an XBlock?

Hi,

Thank you for this wonderful tool. Could you please add props of ref of xMasonry component in the type file definition. Will it be possible to add gaps for this component?