react-plock/dist/index.cjs.js

The 1kB Masonry Grid for React

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),c=require("react");function x(e){return Array.isArray(e)?e:[e]}function B(e,t){return c.useMemo(()=>({display:"grid",alignItems:"start",gridColumnGap:t,gridTemplateColumns:`repeat(${e}, minmax(0, 1fr))`}),[e,t])}function E(e,t,n){const[r,a]=c.useState({columns:0,gap:1});return c.useEffect(()=>{if(!e){a({columns:t[0],gap:n[0]});return}const i=e.map(s=>window.matchMedia(`(min-width: ${s}px)`)),u=()=>{let s=0;i.forEach(h=>{h.matches&&s++});const o=Math.min(i.length-1,Math.max(0,s));a({columns:t[o],gap:n[o]})};u();for(const s of i)s.addEventListener("change",u);return()=>{for(const s of i)s.removeEventListener("change",u)}},[e,t,n]),r}function L({items:e=[],render:t,config:n,as:r="div",...a}){const[i,u]=c.useState(new Map),{columns:s,gap:o}=E(n.media,x(n.columns),x(n.gap)),h=B(s,o);if(!s)return null;const j=n.useBalancedLayout?v(e,s,f=>i.get(f)??0):w(M(e,s),s);return l.jsx(r,{...a,style:h,children:j.map((f,S)=>l.jsx(C,{gap:o,children:f.map((m,d)=>l.jsx("div",{ref:g=>{if(g&&n.useBalancedLayout){const y=g.getBoundingClientRect().height;i.get(m)!==y&&u(A=>{const p=new Map(A);return p.set(m,y),p})}},children:t(m,d)},d))},S))})}function C({children:e,gap:t}){return l.jsx("div",{style:{display:"grid",rowGap:t,gridTemplateColumns:"minmax(0, 1fr)"},children:e})}function M(e=[],t=3){const n=[];for(let r=0;r<e.length;r+=t){const a=e.slice(r,r+t);n.push(a)}return n}function w(e=[],t=3){const n=Array.from({length:t},()=>[]);for(let r=0;r<t;r++)for(let a=0;a<e.length;a+=1)e[a][r]&&n[r].push(e[a][r]);return n}function v(e,t,n){const r=Array.from({length:t},()=>[]),a=new Array(t).fill(0);for(const i of e){let u=0,s=a[0];for(let o=1;o<t;o++)a[o]<s&&(s=a[o],u=o);r[u].push(i),a[u]+=n(i)}return r}exports.Masonry=L;exports.MasonryRow=C;exports.createBalancedColumns=v;exports.createChunks=M;exports.createDataColumns=w;