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.
Related
New with react here. I love the defi world so I'm trying to fork the PancakeSwap frontend from GitHub.
I already figure out how to add my own styling to it, changed de menu items, etc. The only problem I have, is I cant figure out how to change the href of the icons on the footer (Twitter and Telegram).
Anyone can help me? Probably is very easy but I am stuck.
Thanks!
In my case, I just had to hide the entire footer to hide those links. There is one more suggestion which can solve your problem to some extend.
On the file views/App.tsx,
you may remove the Menu call.
This removes the header and footer from the pages. But it is easy to reconstruct a new custom Menu like headerbar with the UIKit.
I have searched across the files and I was able to hide only the footer links and not the social icons.
The footer links can be hidden by not passing footerlinks on the Menu component at ./components/Menu/index.tsx:
return (
<UikitMenu
.
.
// footerLinks={footerLinks(t)}
.
.
/>);
Or, you may use the Menu component from a UIKit fork at https://github.com/nguyenphu27/pancake-toolkit-testnet. The previous builds was not having a footer and hence this UIKit is not having a footer.
Sorry, I was not able to find a perfect solution within the same UI library.
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
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.
swipeable navigation
Whats the best approach to make link area swipeable left and right?
Ive failed to find ready to use component that allows to do that.
Ive tried to use React Touch SyntheticEvent and transform translateX to navigation bar, but failed with calculations. So question is what are the ways to achieve that and is there any react components that can help me to make this work?
Maybe you need to have a look at there.
Although it only supports element swipeable up and down, you can refer to the code of how the author implements element swipeable with translate3d.
The main idea of swiper is to calculate the position of the element, and when to start translation. You can record scrollHeight/scrollWidth and offsetHeight/offsetWidth when you start move event, and compare the value of them when the event is end. Then you know where is the element, and you can control the transform of the element as you want.
So far as I know, maybe Iscroll is a good solution for you.
I'm new to Material-UI. I understand that there are 6 possible zIndices. The documentation states that
zIndex can be used to change the level of each component.
How do I change the zIndex of a custom div that I created?
After a bit of research, I realized that you need to use a Paper element instead of a div. You can find the documentation for the component here:
http://www.material-ui.com/#/components/paper
You seem zoned out a little. zDepth and zIndex are completely different. zIndex is used for aligning the views on top of each other, as in which view should be on top of the other.
zDepth on the other hand in the material ui paper component is only used to assign the depth of 'shadow' of the paper.
Hope that resolves it.