Closed josephj closed 6 years ago
Yes that's right that's how it currently works. You can write your own HoC to set the columns
prop. I'm open to suggestions for a more generic makeResponsive
HoC to include.
I used a use effect and ref to the responsive container to set the number of columns dynamically, and it only needs to rerender when the number of columns changes.
const COL_WIDTH = 275;
useEffect(() => {
if (cardsContainerRef.current) {
let cardsContainerWidth = parseInt(window.getComputedStyle(cardsContainerRef.current).width.replace("px", "") ,10);
let numCols = Math.floor(cardsContainerWidth / COL_WIDTH);
if (cardsContainerNumCol !== numCols) {
setCardsContainerNumCol(numCols);
}
}
});
<div ref={cardsContainerRef}>
<SpringGrid
component="div"
columns={cardsContainerNumCol}
columnWidth={COL_WIDTH}
gutterWidth={12}
gutterHeight={12}
itemHeight={380}
springConfig={{ stiffness: 90, damping: 20 }}
>{...ListItems}</SpringGrid>
</div>
Just realised that you use
enquire.js
which sets the media queries to achieve the responsive view. This works fine when the grid occupies 100% in width. However, when the page comes with a side navigation, the grid will be wider than it's parent container.Do you have any workaround for this? Or I have to write my own
makeResponsive
HoC?