Comments (5)
I am not using hooks, is there any way that I can use this hack? I am currently using setState to set children to render but initial layout is overlapping. If I updateLayout 1 seconds later using setTimeout, it works.
from react-stack-grid.
@berkayk if you are using setState this means and async update is scheduled, so your previous render doesn't have the children? It depends on where you are calling setState, I would recommend putting the data which the grid depends on into props either in its parent component or extract it into a thin SFC with the hook above, which contains only that and other props which go to StackGrid
from react-stack-grid.
Im using this in children component and it works smoothly
https://github.com/maslianok/react-resize-detector
<StackGrid
gridRef={grid => this.grid = grid}
columnWidth={width <= 768 ? '100%' : '33.33%'}
gutterWidth={15}
gutterHeight={15}
monitorImagesLoaded={true}>
<ReactResizeDetector
handleWidth
handleHeight
onResize={() => {
if (this.grid) {
this.grid.updateLayout();
}
}}>
<div>
<img />
</div>
</ReactResizeDetector>
</StackGrid>
from react-stack-grid.
Instead of the requestanimationframe hack, you can use useRef to store a class variable.
const firstUpdate = useRef(true);
useEffect(() => {
if (firstUpdate.current) {
firstUpdate.current = false;
return;
}
if (grid.current) {
grid.current.updateLayout();
}
}, [element.width, element.stack.sizes]);
from react-stack-grid.
That's very helpful. I tweaked the solution slightly to trigger grid.current.updateLayout
each time an image's onLoad
event was triggered, ensuring that delayed load times doesn't affect it. E.g.
useEffect(() => {
if( grid.current ){
grid.current.updateLayout();
}
}, [imageLoadCounter])
from react-stack-grid.
Related Issues (20)
- Images getting overlapped HOT 3
- unnecessary reordering?
- error when rendering.. HOT 3
- With enblessr=true view not appearing before the bundle gets downloaded
- Images overlap taking the position of the preceding images HOT 1
- Grid item height change delay? HOT 2
- Warning: Prop `style` did not match. Server: HOT 3
- Grid does not render on low-end devices
- Repo maintain
- Transition Dropdown in Demo broken
- z-index of spans?
- How to add margin between each cell? HOT 1
- Adjusting the StackGrid component's width breaks the display HOT 1
- call updateLayout() function in a fonctional component HOT 1
- Cannot access live demo link HOT 2
- Cards overlap after individual cards render HOT 3
- How I fixed overlapping! HOT 1
- is there a way to enable keyboard navigation between GridItem(s) ?
- Warning: componentWillMount has been renamed, and is not recommended for use. / Warning: componentWillReceiveProps has been renamed, and is not recommended HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-stack-grid.