askides/react-plock

Possibile to get the real index (idx) ?

tahola opened this issue · 3 comments

tahola commented

Hello,

is it possible to get the real index in the render ?

const items = [...imageUrls];

  return (
    <Masonry
      items={items}
      config={{
        columns: [1, 2, 3],
        gap: [24, 12, 6],
        media: [640, 768, 1024],
      }}
      render={(item, idx) => (
        <img key={idx} src={item} style={{ width: "100%", height: "auto" }} />
      )}
    />
  );

Here idx is the number of the row, is there a proper clean way to know that I am displaying third item ? Like "index" in a map.

Thank you, and thanks a lot for your work

askides commented

Hello!

I need to reasonate about this issue, but i think it can be affordable, the idea would be passing the entire item on the render method, and let the final user decide the prop to use.

Something like this:

return (
  <Masonry
    render={(item) => (
      <img key={item.id} src={item.source} {{ ...others }} />
    )}
  />
);

What do you think about?

  • 👎1
github-actions commented

This issue has been automatically closed due to inactivity. If you still have further updates, please feel free to reopen or create a new issue.