react-html-to-image

A simple React hook to download your HTML markup as a .jpg image.

Installation

Using yarn:

yarn add react-html-to-image

or with npm:

npm install react-html-to-image

Usage

import { useHtmlToImage } from "react-html-to-image";

export const App = () => {
  const { ref, saveHtmlAsImage } = useHtmlToImage();

  const handleDownloadImage = async () => {
    try {
      await saveHtmlAsImage("your-file-name", {
        quality: 0.7,
      });
    } catch (error) {
      // Handle error.
    }
  };

  return (
    <main>
      <div ref={ref} className="…">
        {/* Your markup */}
      </div>
    
      <button onClick={handleDownloadImage} />
    </main>
  );
};

saveHtmlAsImage accepts two params: saveHtmlAsImage(fileName, options)

Param	Type	Required	Default	Description
fileName	string	true		The file name for the downloaded image.
options	object	false		The options for saving your downloaded image.
options.quality	object		0.7	The desired quality of the image. Default is 0.7

See the example for sample implementation.

Known issues

• <img /> within display: flex containers do not show in the downloaded image.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update the tests as appropriate.

License

MIT