`Here is my attempt to dynamically load a component at the click of a button, and show on page.
https://codesandbox.io/s/sweet-haze-knste?file=/src/App.tsx
I am using the below line of code to dynamically import the component when button is clicked.
const importedComponent = React.lazy(() => import("./DynamicallyImportedComponent"));
And the state is set using
this.setState({
importModule: importedComponent
// importModule: CommonEditorCallout
});
However, this does not render correctly.
When I use the regular import using the below, it renders fine
import DynamicallyImportedComponent from "./DynamicallyImportedComponent";
Is this possibly due to the fact that in the regular import I specify the name of the component I am importing, or something to do with the dynamic import itself?
Docs
The lazy component should then be rendered inside a Suspense component, which allows us to show some fallback content (such as a loading indicator) while we’re waiting for the lazy component to load.
So wrapping your lazy loaded component with React.Suspense with a fallback props will fix the error.
<React.Suspense fallback={<div>Loading...</div>}>
{this.state.showImportedModule && <div>{<ComponentToShow />}</div>}
</React.Suspense>
See example
Related
I have a React project and use React Router DOM v6 to manage all my routes.
I have a route that uses a fairly heavy component and, when switching to that heavy component, there is a 1+ second delay until the current page disappears and the new one shows up, since it's taking time to render that component.
Is there a way to change pages before trying to load the component and, perhaps, show a "loading" page while it's doing that?
demo simulating the issue
By "heavy route" I meant that it renders slowly whenever you change routes to it.
What you can do is implement React.lazy() to lazy load the page and then use React.Suspense() to show a loading page while transitioning. Here is an example:
import React, { Suspense } from 'react';
// import MyPage from './pages/MyPage'
// instead of importing MyPage like above, use lazy, like below
const MyPage = React.lazy(() => import('./pages/MyPage'));
function App() {
return (
<Suspense
fallback={<div><p>Loading...</p></div>}
>
<Routes>
<Route path='/mypath' element={<MyPage} />
// other route data
</Routes>
</Suspense>
)
}
export default App;
This is a very simple example. What this does is when you initially load your page, MyPage will not be loaded. Loading of the page will be deferred until it is needed. Once you go to /mypath, MyPage will then be loaded and the Suspense component will show the loading <p> tag. Of course this can be any element you want or even a component.
Alternatively, what you could do is, inside your big component, you could use useState() to create a simple boolean isLoading and setIsLoading state and set it to true initially. Then, render a loading component if isLoading is true. After your operation is completed, set isLoading to false.
I am getting code completions for this component when I import it not as a lazy component .
const AceEditor = React.lazy(() => import('react-ace'));
When I import it like shown above , I don't get any intellisense or code completion for any of the props of the component when I am using it later within the Suspense component.
How do I fix this ?
I have a single page React App that is d3 and SVG heavy, and I would like to be able to redirect from one page to another when a user clicks on an svg rect on one of my pages. I am familiar with this.props.history.push() as well as the <Link> component from the react-router-dom library, however neither of these seem to help in this instance.
The svg element of relevance here is deep in a graphing component of mine that is 3-4 children down from the front-end's main App.js file that does all of the routing, and when I run console.log(this.props) in my component with the svg, there is no history object on the props. I'm not sure if a reproducible example is needed here, as I just need direction.
In short, I have no idea what should go into the on-click function that is associated with my svg rect, to enable redirect in my app. Any thoughts on this would be greatly appreciated!
Edit: obviously this is wrong but i tried to return a Redirect component in on-click handler and it didn't work:
...
...
function handleMouseClick() {
console.log('clicked')
return <Redirect to='/stats' />;
}
myRect.on('click', handleMouseClick)
...
Edit2: should i put the rect elements inside of components in the svg? is that even possible?
You can add the history prop from react-router to a component by wrapping it with withRouter. Just make sure whatever is mounting your component is using the wrapped version (usually by only exporting the wrapped component).
import React from 'react';
import { withRouter } from 'react-router';
class MyComponent extends React.Component {
render() {
return (
<button onClick={() => this.props.history.push('/newpage')}>
Click me
</button>
);
}
}
export default withRouter(MyComponent);
I want to load multiple components on a single page and have different routes for all of them. For example i hit a route /article/1 and it loads a component, after scrolling through completely through that article i want the route to change to /article/2 and the corresponding article to load. I am using react and react router, basically i want 4 (article/3 , article/4) articles on a page and all these should be scrollable with the route changing as i scroll onto a particular article. How can i achieve this using react and react-router?
use react-perfect-scrollbar package from npm.
index.js (main entry point of your application) add this css
import 'react-perfect-scrollbar/dist/css/styles.css';
your component file where you want on scroll change url
import PerfectScrollbar from 'react-perfect-scrollbar';
import { Redirect } from 'react-router-dom';
handleScroll = () => {
<Redirect to="/article/2" />
}
<PerfectScrollbar onYReachEnd={this.handleScroll}> // when you reach then end of screen it's call handleScroll function and redirect to other url.so based on your requirements you can pick up from here.
// your articles code..
</PerfectScrollbar>
I'm using a React rendered SVG from a file.
import React from 'react';
import {ReactComponent as SvgFrontPanel} from '../svg/panel.svg';
render() {
return (<div className="panel">
<h2>Panel</h2>
<SvgFrontPanel/>
</div>);
}
After svg is rendered I need to execute some init code for it. I can do it once via window.onload or documentReady or whatever usual way to check when the page is ready. But then, when this component gets unmounted/mounted, I cannot catch the moment.
I can use componentDidMount or put my code inside render of this component but it doesn't mean the svg inside SvgFrontPanel is rendered at the time.
So here is the question: how can I understand when some uncontrolled component finished rendering? Suppose I cannot modify svg file at all (actually I can but prefer not to).