react-layout-masonry
Version:
Responsive masonry layout for React
1 lines • 8.38 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","names":["useLayoutEffect","useEffect","isResponsive: boolean","breakPoints: BreakPointsArray","breakPoints: BreakPointSpec","breakpoints: BreakPointSpec","windowWidth: number","columns?: Columns","count: number","children: ReactNode","columns?: Columns","group: ReactNode[][]","props: MasonryProps<T>"],"sources":["../src/useWindowWidth.ts","../src/breakpoints.ts","../src/useCoulmnsCount.ts","../src/useMasonry.ts","../src/context.ts","../src/Masonry.tsx","../src/index.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useState } from 'react';\n\nconst isBrowser = typeof window !== 'undefined';\n\nconst useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;\n\nconst useWindowWidth = (isResponsive: boolean = true): number => {\n const [windowWidth, setWindowSize] = useState(isBrowser ? window.innerWidth : 0);\n\n const updateWindowSize = useCallback(() => {\n setWindowSize(window.innerWidth);\n }, []);\n\n useEffect(() => {\n if (isResponsive) {\n window.addEventListener('resize', updateWindowSize);\n }\n\n return () => {\n window.removeEventListener('resize', updateWindowSize);\n };\n }, [isResponsive, updateWindowSize]);\n\n useIsomorphicLayoutEffect(() => {\n updateWindowSize();\n }, [updateWindowSize]);\n\n return windowWidth;\n};\n\nexport default useWindowWidth;\n","import { BreakPointSpec, BreakPoints, BreakPointsArray } from './types';\n\nconst defaultBreakpoints = [640, 786, 1024, 1280, 1536];\n\nconst arrayToBreakpoints = (breakPoints: BreakPointsArray): BreakPoints => {\n return breakPoints.reduce((obj, bpValue, bpIndex) => {\n if (typeof bpValue !== 'number') {\n return obj;\n }\n\n return {\n ...obj,\n [defaultBreakpoints[bpIndex]]: bpValue,\n };\n }, {});\n};\n\nexport const normalizeBreakPoints = (breakPoints: BreakPointSpec): BreakPoints => {\n if (!Array.isArray(breakPoints)) {\n return breakPoints;\n }\n\n return arrayToBreakpoints(breakPoints);\n};\n\nconst findBreakpoint = (breakpoints: BreakPointSpec, windowWidth: number): number => {\n const sortedBreakPoints = Object.keys(normalizeBreakPoints(breakpoints))\n .map(Number)\n .sort((a, b) => a - b);\n\n let bp = null;\n\n for (const breakPoint of sortedBreakPoints) {\n if (windowWidth >= breakPoint) {\n bp = breakPoint;\n }\n }\n\n return bp ?? sortedBreakPoints[0];\n};\n\nexport default findBreakpoint;\n","import { useMemo } from 'react';\n\nimport { Columns } from './types';\nimport useWindowWidth from './useWindowWidth';\nimport findBreakpoint from './breakpoints';\n\nconst DEFAULT_COLUMNS = 3;\n\nconst useColumnsCount = (columns?: Columns): number => {\n const isResponsive = typeof columns === 'object';\n\n const windowWidth = useWindowWidth(isResponsive);\n\n const columnsCount = useMemo(() => {\n if (!isResponsive) {\n return columns ?? DEFAULT_COLUMNS;\n }\n\n const breakPoint = findBreakpoint(columns, windowWidth);\n return columns[breakPoint] ?? DEFAULT_COLUMNS;\n }, [isResponsive, windowWidth, columns]);\n\n return columnsCount;\n};\n\nexport default useColumnsCount;\n","import { Children, ReactNode, isValidElement, useMemo } from 'react';\n\nimport useColumnsCount from './useCoulmnsCount';\nimport { Columns } from './types';\n\nconst createEmptyColumns = (count: number): Array<[]> => {\n return Array.from({ length: count }, () => []);\n};\n\nconst useMasonry = (children: ReactNode, columns?: Columns): ReactNode[][] => {\n const noOfColumns = useColumnsCount(columns);\n\n const columnsChildren = useMemo(() => {\n const group: ReactNode[][] = createEmptyColumns(noOfColumns);\n\n Children.forEach(children, (child, index) => {\n if (isValidElement(child)) {\n group[index % noOfColumns].push(child);\n }\n });\n\n return group;\n }, [noOfColumns, children]);\n\n return columnsChildren;\n};\n\nexport default useMasonry;\n","import { createContext, useContext } from 'react';\n\ninterface MasonryItemContextValues {\n column: number;\n position: number;\n}\n\nexport const MasonryItemContext = createContext<MasonryItemContextValues>({\n column: 0,\n position: 0,\n});\n\nexport const useMasonryItem = (): MasonryItemContextValues => useContext(MasonryItemContext);\n","'use client';\n\nimport { ElementType, useId } from 'react';\n\nimport { MasonryProps } from './types';\nimport useMasonry from './useMasonry';\nimport { MasonryItemContext } from './context';\n\nexport const Masonry = <T extends ElementType = 'div'>(props: MasonryProps<T>) => {\n const { gap, as: Component = 'div', columnProps, columns, ref, ...rest } = props;\n\n const uniq = useId();\n const columnsChildren = useMasonry(props.children, columns);\n\n return (\n <Component {...rest} data-masonry-id={`Masonry-${uniq}`} style={{ display: 'flex', gap, ...rest.style }} ref={ref}>\n {columnsChildren.map((column, index) => {\n return (\n <Component\n key={`Masonry__Column_${uniq}_${index}`}\n data-masonry-column={index + 1}\n {...columnProps}\n style={{\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n gap,\n ...columnProps?.style,\n }}\n >\n {column.map((child, childIndex) => {\n return (\n <MasonryItemContext\n value={{ column: index, position: childIndex }}\n key={`Masonry__Column_Child_${uniq}_${childIndex}`}\n >\n {child}\n </MasonryItemContext>\n );\n })}\n </Component>\n );\n })}\n </Component>\n );\n};\n\nexport default Masonry;\n","import { Masonry } from './Masonry';\nimport useMasonry from './useMasonry';\nimport { useMasonryItem } from './context';\n\nexport * from './types';\nexport { useMasonry, useMasonryItem };\nexport default Masonry;\n"],"mappings":"mlBAEM,SAAmB,OAAW,IAE9B,EAA4B,EAAYA,EAAAA,gBAAkBC,EAAAA,UAE1D,EAAiB,CAACC,GAAwB,IAAiB,CAC/D,GAAM,CAAC,EAAa,EAAc,CAAG,CAAA,EAAA,EAAA,UAAS,EAAY,OAAO,WAAa,EAAE,CAE1E,EAAmB,CAAA,EAAA,EAAA,aAAY,IAAM,CACzC,EAAc,OAAO,WAAW,AACjC,EAAE,CAAE,EAAC,CAgBN,MAdA,CAAA,EAAA,EAAA,WAAU,KACJ,GACF,OAAO,iBAAiB,SAAU,EAAiB,CAG9C,IAAM,CACX,OAAO,oBAAoB,SAAU,EAAiB,AACvD,GACA,CAAC,EAAc,CAAiB,EAAC,CAEpC,EAA0B,IAAM,CAC9B,GAAkB,AACnB,EAAE,CAAC,CAAiB,EAAC,CAEf,CACR,EAED,IAAA,EAAe,EC5Bf,MAAM,EAAqB,CAAC,IAAK,IAAK,KAAM,KAAM,IAAK,EAEjD,EAAqB,AAACC,GACnB,EAAY,OAAO,CAAC,EAAK,EAAS,WAC5B,GAAY,SAIhB,CACL,GAAG,GACF,EAAmB,IAAW,CAChC,EANQ,EAOR,CAAE,EAAC,CAGK,EAAuB,AAACC,GAC9B,MAAM,QAAQ,EAAY,CAIxB,EAAmB,EAAY,CAH7B,EAML,EAAiB,CAACC,EAA6BC,IAAgC,CACnF,IAAM,EAAoB,OAAO,KAAK,EAAqB,EAAY,CAAC,CACrE,IAAI,OAAO,CACX,KAAK,CAAC,EAAG,IAAM,EAAI,EAAE,CAEpB,EAAK,KAET,IAAK,IAAM,KAAc,EACvB,AAAI,GAAe,IACjB,EAAK,GAIT,OAAO,GAAM,EAAkB,EAChC,EAED,IAAA,EAAe,ECnCf,MAAM,EAAkB,EAElB,EAAkB,AAACI,GAA8B,CACrD,IAAM,SAAsB,GAAY,SAElC,EAAc,EAAe,EAAa,CAE1C,EAAe,CAAA,EAAA,EAAA,SAAQ,IAAM,CACjC,IAAK,EACH,OAAO,GAAW,EAGpB,IAAM,EAAa,EAAe,EAAS,EAAY,CACvD,OAAO,EAAQ,IAAe,CAC/B,EAAE,CAAC,EAAc,EAAa,CAAQ,EAAC,CAExC,OAAO,CACR,EAED,IAAA,EAAe,ECpBf,MAAM,EAAqB,AAACF,GACnB,MAAM,KAAK,CAAE,OAAQ,CAAO,EAAE,IAAM,CAAE,EAAC,CAG1C,EAAa,CAACC,EAAqBC,IAAqC,CAC5E,IAAM,EAAc,EAAgB,EAAQ,CAEtC,EAAkB,CAAA,EAAA,EAAA,SAAQ,IAAM,CACpC,IAAMC,EAAuB,EAAmB,EAAY,CAQ5D,MANA,GAAA,SAAS,QAAQ,EAAU,CAAC,EAAO,IAAU,CAC3C,AAAI,CAAA,EAAA,EAAA,gBAAe,EAAM,EACvB,EAAM,EAAQ,GAAa,KAAK,EAAM,AAEzC,EAAC,CAEK,CACR,EAAE,CAAC,EAAa,CAAS,EAAC,CAE3B,OAAO,CACR,EAED,IAAA,EAAe,ECpBf,MAAa,EAAqB,CAAA,EAAA,EAAA,eAAwC,CACxE,OAAQ,EACR,SAAU,CACX,EAAC,CAEW,EAAiB,IAAgC,CAAA,EAAA,EAAA,YAAW,EAAmB,CCJ/E,EAAU,AAAgCC,GAA2B,CAChF,GAAM,CAAE,MAAK,GAAI,EAAY,MAAO,cAAa,UAAS,MAAK,GAAG,EAAM,CAAG,EAErE,EAAO,CAAA,EAAA,EAAA,QAAO,CACd,EAAkB,EAAW,EAAM,SAAU,EAAQ,CAE3D,MACE,CAAA,EAAA,EAAA,KAAC,EAAA,CAAU,GAAI,EAAM,kBAAiB,CAAC,QAAQ,EAAE,GAAM,CAAE,MAAO,CAAE,QAAS,OAAQ,MAAK,GAAG,EAAK,KAAO,EAAO,eAC3G,EAAgB,IAAI,CAAC,EAAQ,IAE1B,CAAA,EAAA,EAAA,KAAC,EAAA,CAEC,sBAAqB,EAAQ,EAC7B,GAAI,EACJ,MAAO,CACL,QAAS,OACT,KAAM,EACN,cAAe,SACf,MACA,GAAG,GAAa,KACjB,WAEA,EAAO,IAAI,CAAC,EAAO,IAEhB,CAAA,EAAA,EAAA,KAAC,EAAA,CACC,MAAO,CAAE,OAAQ,EAAO,SAAU,CAAY,WAG7C,GAFI,CAAC,sBAAsB,EAAE,EAAK,CAAC,EAAE,GAAY,CAG/B,CAEvB,EApBG,CAAC,gBAAgB,EAAE,EAAK,CAAC,EAAE,GAAO,CAqB7B,CAEd,EACQ,AAEf,ECvCD,IAAA,EAAe"}