react-convert-image

A quick proof-of-concept React component for image format conversion. Currently converts to WebP. Browser capability dependent.

Click here to see an example implementation.

Installation

npm install react-convert-image

Usage

import React from "react";
import ConvertImage from "react-convert-image";
 
class Component extends React.Component {
  handleConvertedImage(url) {
    console.log(url);
  }
 
  render() {
    return (
      <ConvertImage
        image="hello-world.jpg"
        onConversion={this.handleConvertedImage}
      />
    );
  }
}

Props

prop	type	required	default	description
image	string	Yes		Path to image or data URL
onConversion	function	Yes		Called with base64 data URL of converted image
format	string	No	webp	Target image format e.g 'webp', 'jpeg', 'png'
quality	number	No	0.92	A Number between 0 and 1 indicating image quality if the format is jpeg or webp

License

MIT