imagetune-react

A React Component implementation of ImageTune, an automatic browser-based image resizer and compressor.

Live Demo

Check out the demo here.

Usage

Install ImageTune React

npm i imagetune-react

Then import and use it like a regular React component.

import React, { useState } from 'react';
import ImageTune from 'imagetune-react';

const Form = () => {
  const [email, setEmail] = useState('');
  const [image, setImage] = useState(null);

  const handleEmail = (evt) => { setEmail(evt.target.value) }
  const handleImage = (evt) => { setImage(evt.target.files[0]) }
  const handleSubmit = (evt) => {
    // handle file uploads like you usually would
  }

  return (
    <form className="form" onSubmit={handleSubmit}>
      <input type="text" name="email" value={email} />
      <ImageTune 
        onChange={handleFile} 
        width=512 
        height=512
        quality=90
      />
    </form>
  );
}

The ImageTune React component is just a native file picker component. When the user selects a file, ImageTune runs automatically and swaps out the selected file for a resized and compressed one generated by ImageTune.

To the end user, there is no difference between this component and the native file picker, but when the upload process begins bandwidth and upload times can be reduced by over 90%.

Component Props and Options

| Name | Description | Default | |---------|------------------------------------------------|---------| | width | Desired width of result image in pixels | 200 | | height | Desired height of result image in pixels | 200 | | quality | Image quality value, changes file size (1-100) | 100 | | type | Image format type (png, jpg, gif) | jpg | | mode | Scale mode (crop or scale) | scale |

Note

Because we use the native File constructor, this component does not support Internet Explorer. Check Can I Use for more information.

License

MIT © connerfritz