I am using react by adding react CDN in index.html file in my simple HTML, CSS, and JS editor according to
according to this doc React, and it is working fine in my code editor's preview:
Code Editor's Preview
But on the main web page, it is not showing the react output set by root.render.
My Webpage View
I want my root.render to run two times accurately and show my data as it is showing in the preview.
Even the data is showing in the console but not on the page like this:
WebPage with console
"like_button_container86551" is the ID of the div in which react app will render, you can access the complete code which I am using here React website file
I don't get the real reason but I solved it with a trick, as data was showing in the console that means that DOM is not showing the updated data so I just assign a key to my div of the content
<span onClick={handleClickOpen} key={contentKey}>
...
</span>
and after the rendering of the component in the useEffect function I increase the key by 1 which means I refresh the DOM element and now the content is shown:
useEffect(() => {
setContentKey(1 + contentKey);
}, []);
Related
Context
I'm trying to use the javascript fetch command to return the HTML of a leetcode.com webpage, but when I do the returned HTML is in a pre-rendered state i.e. the div of interest is empty:
<div id="app"></div>
When I load the page of interest with my browser and inspect element however, I can see that this "app" div gets populated with dynamic content as leetcode uses single-page-application technology. This rendering must be happening after the fetch command executes.
Question
I would like to know how to use the fetch command or similar in order to retrieve the html of a fully rendered webpage. I would like to do this to scrape some content which only appears after the webpage has been fully rendered.
Assumptions
I'm assuming that the fetch command cannot return html that gets rendered by javascript, i.e. similar to what you'll find with vue.js or react.js
I'm using SSR to render HTML. I'm using Webpack's code-splitting, so after React loads, it fetches the chunks. While it's fetching, it doesn't know what to display. If I return null, React overwrites the SSR'ed HTML and replaces it with a white screen. After the chunks load, React renders content again.
How can I get React to not overwrite the SSR'ed HTML? Is it possible for React to not render anything until all the chunks are loaded?
I've for the last month trying to add my react component into a pdf without showing it on the screen, with no luck.
I've exhausted everything I could find on SOF, such as HTML2Canvas which can't be used in my case since the component have to be rendered before one can convert it to canvas and add it.
It does not have to be in the client.
Have you seen the print media query in CSS?
You can do
#media print {
/* Your CSS */
}
You can use this to hide a component with CSS on the normal page but then when it comes to printing you can make that component visible. The component will always need to be on the DOM though.
If you're just trying to have users print your page to pdf using the print dialog, then GavinHenderson5's answer should be sufficient. If you need to actually produce a PDF file that users can download, then a combination of GavinHenderson5's solution with something like Headless Chrome may be preferable.
We have a backend endpoint setup that has a running Chrome instance that then calls a URL on the frontend (rendered React components) printing it to PDF. Using print media queries, you can double dip any styling of the components or display: none/block; if you want to pick and choose for the rendering.
I am using React for a project and I'm trying to set a desired image to be the first image a root component loads, right now the first image being loaded is the logo from navbar component that's also a part of the root page component.
I've looked online for a solution but didn't find any, is there any way to do that in React? something like delaying the rendering of all other images except one.
The reason that I want to achieve this is to share the production webpage in an app, and the app takes the first image loaded as the default cover image for the shared link.
Apps generally use images declared in a meta tag as the preview. You should check which meta tag the other site uses, grabbing the "first" image is likely just a fallback for a missing meta tag
const {complete} = document.getElementById("myImg") // select image. You can use ref here as well.
if (complete) {/*do your stuff, eg setState({displayContent: true})*/}
I am trying to embed a timeline on a web site and I have the following problem:
The TimelineJS doesn't seem to work when the containing div is nested in another div. To avoid this problem I have created an iframe and put the entire timeline into another .html file which works fine for displaying the timeline. Now, I want to filter in and out some timeline content based on category selection made by the user. If the external html containing the timeline calls timeline.js to load the content, and the category selection event handling is done in a index.js file called by the index.html (which contains the iframe and other elements) how can I call the reload function in timeline.js if the events are being handled in the index.js? In other words, how can my index.js know anything about timeline.js, call a method defined in that file and still have the changes applied to the content of the timeline.html?
I am pretty new to javascript and I seem to miss quite a bit of information required to solve the problem.
I had the same issue and didn't find a solution.
I finally tried another approach :
1°) Put the timeline directive (my project uses AngularJS) into a view 'views/timeline.html'
<div id="my-timeline" timeline-js data="timelineData" height="height"></div>
2°) Include this view in the main view
<div ng-include="url"></div>
3°) Reload the include each time you need in the controller, and change the url to 'forget' the old data
var newUrl = function() {
$scope.url = null;
var ran = Math.random();
$scope.url = 'views/timeline.html?r='+ran;
};
I'm aware it's far to be perfect in terms of memory, but it's all I found