I would like to create React app where you import, move and resize images on the screen and then export their positions. My idea was that I would have image as a component that would have its own attributes like positions, width, height and source. The problem is that I don't want to render new image element every time the component change its state (position, size, etc.) since it can be slow to load the image. I just want to change its style. Is there some React fashion approach how to do it? Thank you!
Maybe for your problem might be usefull to look life cycle update component...because it gives you some certain pattern to re-render a component in your own way..try to read something on "componentShouldUpdate()" this method give you a way to re-render the component only certain condition.
maybe here might be right for you: https://www.toptal.com/react/optimizing-react-performance
My best
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! :)
In React Native, I would like to achieve the following outcome (example):
example1 example2
On Long Press of the image (or touchableOpacity), I hope to display an overlay view of some extra information (could be images or text). The information disappears when the finger leaves the screen. I was thinking if it is something related to overlay view and setState, but I could not find the function where the view only appears during long presses. Is there a way to achieve this? Or is there a module that could provide a solution?
Any help would be appreciated!
If you are using the latest react native version you can use the onPressOut functionality of a pressable component: https://reactnative.dev/docs/pressable.
Trigger the show overlay with the onLongPress (or onPressIn but it's not a good UX) function and then trigger the hide overlay with onPressOut function.
For the overlay I suggest you a cool library like:
https://reactnativeelements.com/docs/tooltip/
I am new to React. Basically, I have been given a HTML Bootstrap template. It is pretty simple... a left sidebar (always present), an adjacent menu (always present) and all other components fit adjacent to side bar and under menu. I have attached a pic so you can easily see what I mean.
I can display the components but my dynamic components or the components that change are rendered below the sidebar and NOT next to it.
I have tried to solve this issue for days... no luck. Help would be greatly appreciated.
Thank you
Vincent
It seems like a css issue, make sure you have your child divs inside the parent and nothing is position absolute. if you have it online I can take a look.
I'm working on some sort of 'continuous' animation. Say a div translates from its current location 200px to the right. There's an option to change the distance of translation. While its animating, the user changes from 200px to 400px. The div should still move smoothly until it reaches its final point which is 400px from its previous location. I have done the basic moving animation, however I can't figure out how to make it continues without jumping when the distance changes.
Here's the codesandbox that I'm working on which best illustrates my point above and what I'm struggling with. Any ideas or help would be greatly appreciated. Thanks :))
Edit: Steps to reproduce the jumping problem:
Open the sandbox
Click the 'Toggle' button
Click the 'Add distance' button
While the red div animates, click 'Add distance' button again
And you should see the div jumping
There is probably a way to fix your code so that it works as you want, though I would suggest going in another direction. There are several animation libraries in React that can help you solve this problem. The resulting code is also going to be more portable.
For your specific need, I would suggest using a library called react-move. It is part of the react-tools which provides other cool libraries. I created a CodeSandbox with my take on your problem using react-move.
I only took the transform line for your code, since I wanted to focus on how you could integrate the library into your example.
To create the animation, I imported a component from react-move called Animate. It's the main component of the library. You use this component to wrap a function using the function as child pattern. This function will receive a state object with information regarding the animated element. It also consumes a start, update, enter, and leave function, that represents the state for those actions.
Inside you function as child function is where you define the animation. In our case, we want to translate the Box along its x axis, using the x value provided on the state object.
OBS: On my example the Box returns to the start (x === 0) when its offset value is bigger than the window's width.
I hope it helps.
I have face complex loading example with React.
This is what I want to do how it looks visually
Basically I need to load this in multiple stages.
It is not really good to do with css like elements on the bottom.
Basically I need render, get element width height, render all others.
Just spinning my head how I can do that.
It should be like render->render somehow