Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
If an image made with use-react-screenshot looks different from the component on screen, first confirm the hook is capturing the intended, fully rendered element. Then isolate the cause: use-react-screenshot relies on html2canvas, which reconstructs a picture from DOM and CSS information rather than photographing the browser’s pixels. Unsupported styles, cross-origin images, inaccessible iframes, and canvas size limits can all change or remove content. The right fix depends on which of those applies—not on one universal option.
Start by checking the target and dependencies
A capture can look wrong simply because the ref points to a different element than expected, or because the element has not reached the state you intend to capture. Verify the actual target before changing CSS or renderer settings.
- Check the ref: confirm it is attached to the element you want, not a wrapper, sibling, or conditionally rendered fallback.
- Check what is mounted: capture only after the target has rendered and any content it depends on is present. If the component changes after a click or request, trigger the capture after that update has committed.
- Check package installation: the package documents
reactandhtml2canvasas peer dependencies. Install them if they are missing, and check the versions actually resolved in your application.
npm install use-react-screenshot react html2canvasIf React is already installed, it does not need to be installed again. A minimal hook integration follows the package’s documented pattern; use the API supported by the version in your project if it differs.
Free tools Windows power users keep installed
One-click scans. No signup required.
import { useRef } from 'react';
import { useScreenshot } from 'use-react-screenshot';
export default function ScreenshotExample() {
const targetRef = useRef(null);
const [image, takeScreenshot] = useScreenshot();
return (
<main>
<section ref={targetRef}>
<h1>Capture this component</h1>
<p>This is the element passed to the screenshot hook.</p>
</section>
<button onClick={() => takeScreenshot(targetRef.current)}>
Capture
</button>
{image && <img src={image} alt="Captured component" />}
</main>
);
}For debugging, temporarily give the target a visible border and a short, distinctive heading. If those do not appear in the image, investigate the ref, render timing, or capture dimensions before diagnosing a complex CSS property.
#1 Best Overall
Understand what the renderer can and cannot reproduce
html2canvas builds an image from the page’s DOM and style information. It does not take a native screenshot of the browser’s rendered pixels. Its own documentation cautions that the output may not be fully accurate to the real representation. As a result, the browser can display a style correctly while the reconstructed image omits or alters it.
When layout, colors, fonts, or effects differ, reduce the problem to the smallest element that still reproduces it. Temporarily remove unrelated components, animations, and decorative styles. Then add the suspect pieces back one at a time. This distinguishes a renderer support gap from an issue caused by the overall page or capture target.
- If only one CSS effect is missing, look for an unsupported or partially implemented property in the html2canvas documentation for the version installed in your app.
- If text or layout shifts, compare the computed styles and available fonts on the live element with what the capture environment can access. Do not assume a setting can make an unimplemented CSS property render accurately.
- If an element is absent altogether, first check whether it is in the target subtree and present at capture time. Then check resource loading, iframe origin, and output dimensions.
Keep the reduced example small. A minimal reproduction makes it easier to identify whether the failing part is a specific style, asset, nested browsing context, or page size.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Fix missing or altered images by checking CORS
Images hosted on a different origin are subject to browser cross-origin rules. For html2canvas to use such an image in a canvas, the image server must permit it with an appropriate Access-Control-Allow-Origin response header. Setting useCORS: true asks the renderer to load images using CORS; it does not override the server’s policy or bypass browser security.
- Identify the exact image URL that disappears or taints the output, and check whether it is same-origin with your app.
- If it is cross-origin, verify that the image response includes a CORS header that permits your page’s origin (or otherwise allows the request as intended).
- Use
useCORS: trueonly when the remote server is configured to allow that access and the installed html2canvas version supports the option. - If you control neither the image server nor its CORS headers, serve the asset through a same-origin proxy that you operate and are authorized to use.
A proxy is not a way to evade access controls: it should only fetch content your application is allowed to use. If the hook does not expose html2canvas options, confirm that against the installed package version rather than assuming an option passed to the hook will reach the renderer. For a controlled diagnostic, call html2canvas directly on the same element.
import html2canvas from 'html2canvas';
async function captureWithCORS(element) {
if (!element) throw new Error('Capture target is not mounted');
const canvas = await html2canvas(element, {
useCORS: true,
onError(error) {
console.error('html2canvas resource error:', error);
},
});
return canvas.toDataURL('image/png');
}This direct call is a diagnostic path, not a guarantee that the hook accepts the same configuration object. The onError callback can help surface resource failures; inspect the configuration reference for the html2canvas version your app actually uses.
Rank #3
Check iframes and other nested content
Iframe behavior depends on origin and sandbox settings. html2canvas documents recursive rendering for same-origin iframe content, but the browser prevents access to a cross-origin iframe’s contentDocument. A sandboxed iframe without allow-same-origin has a similar access restriction.
- Same-origin iframe: verify that it is loaded and that the package’s renderer can access its document at capture time.
- Cross-origin iframe: do not expect the parent page’s capture to read and reconstruct its contents. Browser same-origin protections apply.
- Sandboxed iframe: check the sandbox attributes and the security requirements before changing them. Removing sandbox protections solely to make a screenshot work may create a security risk.
If the embedded content must be captured and is outside the current page’s permitted access, arrange for the system that owns that content to provide an authorized image or capture it within its own origin.
Resolve blank or clipped output by matching dimensions
A blank or cut-off canvas can result from the viewport dimensions used during reconstruction, or from browser and platform canvas limits. Those limits vary; exceeding them can produce partial or blank output without a clear error. Do not treat a mobile-screen report as proof of a universal mobile-specific bug: check the dimensions and browser involved.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
For an element that extends beyond the viewport, the html2canvas FAQ documents passing its scroll dimensions as the renderer’s window dimensions:
import html2canvas from 'html2canvas';
async function captureFullElement(element) {
if (!element) throw new Error('Capture target is not mounted');
const canvas = await html2canvas(element, {
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight,
});
return canvas.toDataURL('image/png');
}Use this when the element’s full scrollable area is what you intend to capture. It is not a blanket fix for an unsupported style, an inaccessible iframe, or a canvas that exceeds the browser’s capabilities. If output remains blank or incomplete, reduce the capture area and test again. A smaller working image points toward a size constraint; it does not establish a single cross-browser maximum.
For unexpectedly blurry or large results, inspect the configured scale and the final canvas dimensions. A larger scale increases output pixels and resource use, but does not improve CSS support or make the reconstruction identical to the browser display.
Use configuration options as targeted diagnostics
html2canvas provides settings that can help isolate specific problems. First check which version is installed and read the matching configuration reference; do not assume every option is exposed by use-react-screenshot.
| Symptom | Option or check | What it can tell you |
|---|---|---|
| Some content falls outside the result | windowWidth and windowHeight |
Testing the element’s scrollWidth and scrollHeight can reveal a viewport mismatch. |
| A remote image is missing | useCORS plus the image server’s response headers |
Helps only if the server permits the cross-origin request; it cannot defeat browser policy. |
| A resource fails during capture | onError |
Can expose resource-loading errors for investigation. |
| Output is too large, small, or resource-intensive | scale |
Changes output scale; it does not change which CSS the renderer supports. |
| A troublesome child should not be captured | Exclusion settings or adjusted cloned styles, if available in the installed version | Can help isolate or omit content; it does not repair the omitted element’s rendering. |
When a setting changes the output, record the smallest reproduction and the precise option values. This helps prevent a diagnostic workaround from becoming a page-wide change that masks the actual cause.
Troubleshooting by symptom
| What you see | Likely area to inspect | Next step |
|---|---|---|
| The wrong component or nothing at all | Ref target, conditional rendering, or capture timing | Log or inspect the ref immediately before capture; confirm the element is mounted and contains the expected content. |
| One style or visual effect is absent | html2canvas CSS support | Reduce the example to that property and check support in the installed version’s documentation. |
| Remote images are absent | CORS headers or resource loading | Inspect the image response; enable CORS loading only if the server permits it, or use an authorized same-origin proxy. |
| Embedded page content is missing | Iframe origin or sandbox | Determine whether the frame is same-origin and whether sandbox restrictions prevent document access. |
| Capture is cut off or entirely blank | Viewport mismatch or canvas dimension/area limits | Try scroll dimensions for the viewport, then reduce the capture dimensions to test for a limit. |
| Results differ between machines or browsers | Browser implementation, assets, fonts, viewport, or renderer version | Record the browser and version, viewport, installed html2canvas version, target dimensions, and resource status for each reproduction. |
When filing an issue or asking for help, include the capture code, a minimal target component, the relevant CSS, browser and version, package versions, target dimensions, and whether the mismatch is missing content, altered styling, scaling, or clipping. Those details help distinguish causes that can look similar in the final image.
Recommended Free Tools
When to use a different capture method
If your requirement is an image of the browser’s actual rendered pixels, DOM reconstruction may not be the right fit. Choose based on where the capture needs to run, whether it needs access to live browser content, the CSS and dynamic behavior involved, cross-origin constraints, and output-size needs. The html2canvas guidance points to native browser screenshot APIs for browser extensions, and Puppeteer or Playwright for server-side screenshot generation. These approaches are not interchangeable: select one that fits your deployment and its security model.
Or skip the browser setup
If you need a screenshot from a URL rather than an image of a component inside the current React page, ScreenshotNeo is a website screenshot API and MCP server. Its one-request API returns an image or PDF; its clean-shot steps can accept consent banners and remove known consent platforms, newsletter popups, and chat widgets before capture. Each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. AI agents can use its MCP tools to take screenshots, get page information, and capture PDFs.
For a quick URL capture, use cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. One thousand screenshots a month are free with no card; paid plans start at $5 for 3,000. This captures a URL in the service, not an arbitrary React component in your local page.
Sign up for ScreenshotNeo and start with 1,000 free screenshots a month, with no card required.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
