Skip to content

ImageTune React component for automatically resizing and compressing images uploaded via a native file selector.

Notifications You must be signed in to change notification settings

connerfritz/imagetune-react

Repository files navigation

imagetune-react

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

NPM JavaScript Style Guide

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

About

ImageTune React component for automatically resizing and compressing images uploaded via a native file selector.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published