React.js use-react-screenshot Example to Take Screenshot of HTML With CSS and Download it as Image in Browser

Welcome folks today in this blog post we will be using the use-react-screenshot library to take screenshot of html with css element and download it as image file in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js project using the below commands as shown below

npx create-react-app sampleapp

cd sampleapp

And now we need to install the below library using the below command as shown below

npm i use-react-screenshot

And after that you will see the below directory structure of the react.js app as shown below

And now we need to edit the App.js file and copy paste the below code

App.js

import './App.css';
import React, { createRef } from "react";


function App() {
  const ref = createRef(null);

  return (
    <div>
      <button onClick={downloadScreenshot}>Download screenshot</button>
      <div
        ref={ref}
        style={{
          border: "1px solid #ccc",
          background:'red',
          padding: "10px",
          marginTop: "20px"
        }}
      >
        <h1>John Williamson is the Captain<br></br>
        of New Zealand
        </h1>.
      </div>
    </div>
  );
}

export default App;

import './App.css';

import React, { createRef } from "react";

function App() {

const ref = createRef(null);

return (

<div>

<button onClick={downloadScreenshot}>Download screenshot</button>

<div

ref={ref}

style={{

border: "1px solid #ccc",

background:'red',

padding: "10px",

marginTop: "20px"

}}

<h1>John Williamson is the Captain<br></br>

of New Zealand

</h1>.

</div>

);

}

export default App;

As you can see we have the simple html and css template and inside the div we have attached the ref attribute and we are importing the useRef at the top and it is initialized to null when we load the page. And then we have also attached custom styles to the div such as the background color and the margin,padding etc. And then we have the button to take the screenshot of the html div element and download it as attachment.

And now we will define the function once you hit the download button. So just modify the App.js file and copy paste the below code

App.js

import './App.css';
import React, { createRef } from "react";
import { useScreenshot, createFileName } from "use-react-screenshot";


function App() {
  const ref = createRef(null);
  const [image, takeScreenShot] = useScreenshot({
    type: "image/jpeg",
    quality: 1.0
  });

  const download = (image, { name = "img", extension = "jpg" } = {}) => {
    const a = document.createElement("a");
    a.href = image;
    a.download = createFileName(extension, name);
    a.click();
  };

  const downloadScreenshot = () => takeScreenShot(ref.current).then(download);

  return (
    <div>
      <button onClick={downloadScreenshot}>Download screenshot</button>
      <div
        ref={ref}
        style={{
          border: "1px solid #ccc",
          background:'red',
          padding: "10px",
          marginTop: "20px"
        }}
      >
        <h1>John Williamson is the Captain<br></br>
        of New Zealand
        </h1>.
      </div>
    </div>
  );
}

export default App;

import './App.css';

import React, { createRef } from "react";

import { useScreenshot, createFileName } from "use-react-screenshot";

function App() {

const ref = createRef(null);

const [image, takeScreenShot] = useScreenshot({

type: "image/jpeg",

quality: 1.0

});

const download = (image, { name = "img", extension = "jpg" } = {}) => {

const a = document.createElement("a");

a.href = image;

a.download = createFileName(extension, name);

a.click();

};

const downloadScreenshot = () => takeScreenShot(ref.current).then(download);