I have a set of items which are rendered into a list. Each item will have a different height when rendered. I need to know item's height in advance before it's mounted into the DOM. So the container should know height of each item it's rendering before they're rendered :)
Is it possible to calculate the height of React element before inserting it into the DOM, dynamically?
I guess you can't get the elements's height before they are rendered because The DOM API can't give you the height of elements it doesn't even know yet.
Are all the different heights totally random ? If not, you could make a guess based on the props object of each element.
Related
I am stuck on implementing a UI in React.
I want to trigger a state change when an element crosses the centre of the viewport.
Here's a prototype of the design: https://cln.sh/sNhueq
In this prototype, the box on the right is sticky so it stays on the screen. And the list on the left moves as we scroll. I want to know when a list item crosses that red line so I can change the content of the box.
I am using framer-motion and react-intersection-observer.
Here's what I tried:
I tried using the viewport prop of <motion.div> but it triggers when the element enters the whole viewport. Yes, we can set root prop to an element's ref but for that the root element has to be an ancestor which the red line is not.
I tried react-intersection-observer but got the same results (because the ancestor limitation comes from the IntersectionObserver API in general).
I ultimately thought of some hacky non-performant ways like having a scroll listener, checking the bounds of root and target and finding if they collide. But I really don't want to do that heavy computing.
Is there any way with IntersectionObserver or something else that is performant?
Any help is appreciated. Thank you! :)
I have a flatlist with two columns which renders card components. Once a user clicks a card, it pops up by using Animated API of React Native.
I am changing the clicked component's ZIndex value to 10. When it is closed, the value is set to 0.
The problem is that this logic works only in row elements, but not between rows. So, every other card positioned in a lower indexed row, stays behind the others.
What should I do for this problem? Thank you in advance.
Here is the example;
I'm implementing a carousel and I want to target the element at the center of the slider. So, I can make it pop a little.
How can I target this component? I have found ways to know if the element is inside the viewport or not but I want to know if it's horizontally centered.
Original Problem
Horizontal scroll and set state
Since you have no code my answer will be more theoretically how to do it.
So first off you should have a boolean state that you can toggle for the active state. This state should be controlled by the container. That way you can only activate one at a time.
Next you should get 2 values, the X scroll position of the container and the center point of the visible area of the gallery.
Then you can just calculate an offset on mount and then X scroll of the gallery.
So in theory it starts at 0 and your container is 500px you know that the active slide is at the 250px mark so you can calculate that with the position of the slide, it should be the last slide that passed that point. then just recalculate this value on scroll. (maybe throttle)
Possibly able to use react-hook-inview
I've used this react hook before on the Y axis. I'm not 100% sure that it works on the X scroll. But it can be a great way to trigger a state change on each of the slides. The only issue is that you'll be adding a event listener to each of your slides (possible performance hit).
You can see that lib here
This one lets each slide control it's own inView state.
I have one RGL component in my application. It is rendered correctly but when I add some content in Grid item then the content overflows the grid item. It is not pushing the Grid item to increase the height also I tried after updating h component in layout but updated layout isn't respected too.
PS: This works me - I'd to update the key prop every time the height was updated. In short I'd to force re-render the RGL component. And the easy way for me was simply update the keys`.
In a AngularJS app, using ui-router, i want to change the height of an element (sidebar), when the content inside the sidebar gets updated.
Whats the best way to do this?