I'm looking to trigger a route to another page in React (using React Router) after an animation is triggered. Off the top of my head, I know I can trigger the animation and Route after a setTimeout is complete, but something tells me that is not a good way to do it. Am I wrong about that, or is there a better way to cause a delay in routing to another page?
An example of what I'm thinking:
target.style.animation = 'example';
setTimeout(() => {
//Route here
}, 2500);
Assuming you're on a recent version of React, you can use the useHistory hook from react-router to programmatically navigate by calling history.push("/my-next-route") in your setTimeout callback. Check out the official docs for an example.
If your animation is already working and all you need to do is add the actual navigation part, that should get you there. If you want to know the "right" way to do this, you'll need to post more code so we can see exactly what you're trying to accomplish. There are some libraries for handling animations in React, and some others that help combine that with routing, but I can't recommend that as a solution without more context.
Related
I need to use ScrollToTop, but not for every link. What is the best way to do this? Adding a function to every link where I want to use this function seems like the wrong way. I was also thinking about wrapping all components <ScrollToTop>(all components and routes)</ScrollToTop> and excluding only the places where I don't want to use it - just not sure how to do that. I've tried to find the answer, but I guess no one has asked this, or I can't find it.
If I understand your question, you can create a Higher order component which has this ScrollToTop functionality. See here
Try it
let scrollToTop = () =>{window.scrollTo(0,0)}
Consider this function (this is just an example):
function highlight(el) {
el.style.transition = "background-color 0.5s";
el.classList.add("highlight");
setTimeout(() => {
el.classList.remove("highlight");
setTimeout(() => {
el.style.transition = "";
}, 500);
}, 500);
}
document.getElementsByTagName("a").addEventListener("click", function () { highlight(this) });
This is "universal function" that automatically binds to every <a> on page onload, it is short (only several lines long) and I can add or remove it in seconds (the code on pages are intact).
What is the best approach to implement it in React App?
Course I knew the obvious way, with the manual add of onClick to every <a> in every component on page with setState logic, but ... it kinda sucks
I'm new to React, maybe someone can point me to the right direction
How I can implement this logic on every page(every component that has <a>) efficiently, with the ability to easy remove it if it is no longer needed?
Well, the way I see it, if you want the react way, then you would want to create a presentation component with the defined behavior and use that component instead of .
In fact, that would actually be a perfect fit for a presentational react component.
Then, if you need to implement any changes, you would do them inside that component.
You could alternatively add vanilla js to the index page but that kinda misses the whole point of react.
If you are currently developing this application then the best approach is to create a small tiny component for it. For example you can create a component HighligtedAnchor and can implement the stylistic features in it directly.
Secondly, if you directly want to handle a lot of anchors then the most appropriate place would be the root of your application that is usually App.js or you can write it down in the index.html as well if you really want to move forward with the plane js approach.
If you are looking at for something like good old jquery live you can't do that in reactjs.
The best thing you can do is to create a custom component that wraps the <a> tag. And use your custom component everywhere you would use regular <a> tag.
I have to render a lot of divs into DOM. So, what I did is I render the first 5 elements into the DOM first after that I render every 10 divs with 300ms interval period.
The problem is when I change into display: block I need to change something in the component. So, I try to use didRender hook for that.
Code is below
didRender() {
if(this.element.offsetParent) {
this.set('myvar', true);
}
}
But it's not working perfectly. Anyone please suggest me which is the best way to do this.
_Thanks in Advance.
It's hard to guess your use case from the question but I assume that it's about rendering a very large list of items without causing performance issues. The ember ecosystem provides bulletproofen addons to do so. The most established ones I'm aware of are ember-collection and ember-large-list. I would recommend to use one of these if they suit your requirements. Reimplementing something similar will be a lot of work. Rendering new items on a timeout basis would not scale well as it doesn't take workload of browser into account.
For your concrete question: Ember does not provide a way to listen to CSS changes. You should execute custom logic at the same place as in which you are mutating the property which triggers the CSS change. If it has to be run after render, you need to deal with Ember's runloop.
I using some angular 2 components in my project, and I need to change some of component's position. I use DOM to change the position first, like replaceChild or insertBefore, something like that. But I notice that angular 2 doesn't know the DOM change, seems like my DOM change is over the angular 2 life cycle. So, is there any way I can edit DOM in angular2 ? or some way I can change the order of components?
For you can understand what I'm doing, I'm building some components and I want to drag them and switch their position. I find a plug-in write in JQuery, you can find a gif on its GitHub site (https://github.com/Barrior/DDSort/blob/master/img/ddsort.gif). I want to implement something like that gif.
I find something maybe help on GitHub, but I don't know how to use it.
https://github.com/angular/angular/blob/master/modules/angular2/src/core/linker/view_manager.ts
I realize this was asked a while ago, but for others that might be struggling with something like this... Angular uses zones which I believe monkey-patch asynchronous JavaScript operations.
To trigger DOM updates that might not otherwise be picked up by Angular, you can run your with zones...
import { NgZone } from '#angular/core';
#Injectable()
export class SomeService {
constructor(private zone: NgZone) {}
someFunction() {
this.zone.run(() => {
// Your code goes here!
});
}
}
Take a look at this blog on zones
To follow the best practice, developers should use ViewChild to modify/use DOM. Here is an example to show how to use ViewChild to get a DOM element. You can use a "#" to mark the element you want to use and get it on your component.
If you want to get a collection of child elements in a component you should use ViewChildren.
The question was asked when I started to Learn Angular, it's stupid question and I believe there are many beginners like manipulate DOM directly. Please update your DOM in "Angular Way".
I have a question following this post:
issue
How should I use a jQuery plugin that modify the DOM with react. Like jimfb kindly answered to me on GH, React shoud return a pre-rendered component. So my question is, how exaclty call a function like remodal() in my example, during the lifecycle of a component?
I suggest you to read my answer here:
Why should addChangeListener be in componentDidMount instead of componentWillMount?
But basically, when you need to integrate some existing plugin or code with React, the painless way is to generally call that code on the componentDidMount method and do the event listening the old way. If you are with jQuery, that means you should use something like
$(this.getDOMNode()).find('.some-child').on('click', this.onChildClick)
By doing it this way, you will miss some of the most important features regarding event delegation in React (see https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#under-the-hood-autobinding-and-event-delegation) but that should not be a problem unless you wanted to create hundreds of event listeners.