Baspa/react-uploadcare-transformations

React component for Uploadcare transformations

react-uploadcare-transformations

Show images that are transformed using Uploadcare image processing URLs. No need to write or generate the URL yourself. Just pass the UUID of the file, optionally pass the custom CDN and add the transformations - through attributes - you want to apply and the React component generates the image for you.

This package is inspired by the PHP Uploadcare Transformations package. Be sure to check that out when using PHP. At this moment it has 13 more transformations available than this package, those will be available in this package soon.

• Requirements
• Installation
• Usage
• Documentation
  • Adding filename
  • Auto rotate
  • Blur faces
  • Enhance
  • Flip
  • Format
  • Grayscale
  • Invert
  • Miror
  • Preview
  • Progressive
  • Quality
  • Rotate
  • Set fill
  • Sharpen
  • Zoom objects
• Testing
• Changelog
• Contributing
• Security Vulnerabilities
• Credits
• License

Requirements

• React 16.8.0 or higher
• Uploadcare account
• Node.js 10.0.0 or higher

Installation

npm install --save react-uploadcare-transformations
# or 
yarn add react-uploadcare-transformations 

Usage

1. Include the UCImage component.
2. Get the UUID of the file you want to show.
3. Set your CDN url (optional).
4. Create the transformation URL by adding one or more transformations to the component. Simply add an object with the correct values. You can add as much transformation methods as you want.
5. The component outputs an image. Want to add your own classes to the image? Simply add the classname property!

import React from 'react'

import { UCImage } from 'react-uploadcare-transformations'

const App = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      preview={{ width: 300, height: 300 }}
      setFill={{ color: 'ff0000' }}
    />
  )
}

export default App

List of possible transformations

Each transformation follows the documentation on Uploadcare which you may find here. The current list of possible transformations and where to find the documentation:

Transformation	Uploadcare Documentation link
Auto rotate	Link
Blur faces	Link
Enhance	Link
Flip	Link
Format	Link
Grayscale	Link
Invert	Link
Miror	Link
Preview	Link
Progressive	Link
Quality	Link
Rotate	Link
Set fill	Link
Sharpen	Link
Smart resize	Link
Zoom objects	Link

Documentation

Adding filename

Original filenames can be accessed via Uploadcare's REST API. This can be done by making a request to receive a JSON response with file parameters including original_filename.

You can set an optional filename that users will see instead of the original name:

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      filename='my-image.jpg'
      preview={{ width: 300, height: 300 }}
    />
  )
}

Auto rotate

The default behavior goes with parsing EXIF tags of original images and rotating them according to the “Orientation” tag. Using false as parameter allows turning off the default behavior.

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      autoRotate={false} // or true
    />
  )
}

Blur faces

When faces is specified the regions are selected automatically by utilizing face detection.

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      blurFaces={50}
    />
  )
}

Enhance

Auto-enhances an image by performing the following operations: auto levels, auto contrast, and saturation sharpening.

Strength must be a number between 0 and 100. Default value is 50.

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      enhance={50}
    />
  )
}

Flip

Flips images.

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      flip
    />
  )
}

Format

Converts an image to one of the following formats: jpg, png, webp, auto.

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      format={'jpg'}
    />
  )
}

Grayscale

Desaturates images. The operation has no additional parameters and simply produces a grayscale image output when applied.

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      grayscale
    />
  )
}

Invert

Inverts images rendering a 'negative' of the input.

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      invert
    />
  )
}

Mirror

Mirrors images.

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      mirror
    />
  )
}

Preview

Downscales an image proportionally to fit the given width and height in pixels.

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      preview={{ width: 300, height: 300 }}
    />
  )
}

Progressive

Returns a progressive image. In progressive images, data are compressed in multiple passes of progressively higher detail. The operation does not affect non-JPEG images; does not force image formats to JPEG.

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      progressive={true} // or false
    />
  )
}

Quality

Sets output JPEG and WebP quality. Since actual settings vary from codec to codec, and more importantly, from format to format, we provide five simple tiers and two automatic values which suits most cases of image distribution and are consistent.

Quality must be one of the following values: smart, smart_retina, normal, better, best, lighter, lightest.

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      quality={'best'}
    />
  )
}

Rotate

Right-angle image rotation, counterclockwise. The value of angle must be a multiple of 90.

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      rotate={90}
    />
  )
}

Set fill

Sets the fill color used with crop, stretch or when converting an alpha channel enabled image to JPEG.

Color must be a hex color code without using the hashtag.

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      setFill={{ color: 'ffffff' }}
    />
  )
}

Sharpen

Sharpens an image, might be especially useful with images that were subjected to downscaling. strength can be in the range from 0 to 20 and defaults to the value of 5.

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      sharpen={20}
    />
  )
}

Smart resize

Content-aware resize helps retaining original proportions of faces and other visually sensible objects while resizing the rest of the image using intelligent algorithms.

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      smartResize={{ width: 300, height: 300 }}
    />
  )
}

Zoom objects

Zoom objects operation is best suited for images with solid or uniform backgrounds.

Zoom must be a number between 1 and 100.

import { UCImage } from 'react-uploadcare-transformations'

const = () => {
  return (
    <UCImage
      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'
      zoomObjects={50}
    />
  )
}

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Bas van Dinther
• All Contributors

License

The MIT License (MIT). Please see License File for more information.