{"id":16462780,"url":"https://github.com/baspa/react-uploadcare-transformations","last_synced_at":"2026-01-27T05:02:46.472Z","repository":{"id":59981890,"uuid":"539972962","full_name":"Baspa/react-uploadcare-transformations","owner":"Baspa","description":"React component for Uploadcare transformations","archived":false,"fork":false,"pushed_at":"2024-06-21T12:48:06.000Z","size":3547,"stargazers_count":0,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-14T01:18:17.244Z","etag":null,"topics":["image-processing","react","reactjs","uploadcare","uploadcare-react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Baspa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-22T12:34:39.000Z","updated_at":"2022-09-23T13:44:31.000Z","dependencies_parsed_at":"2024-04-23T02:57:50.959Z","dependency_job_id":"211c03e6-3d1d-45b9-a1a3-bec98c929929","html_url":"https://github.com/Baspa/react-uploadcare-transformations","commit_stats":{"total_commits":41,"total_committers":1,"mean_commits":41.0,"dds":0.0,"last_synced_commit":"d6b06ba7dfccb1bbacd139ed034909e6d359654c"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Baspa%2Freact-uploadcare-transformations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Baspa%2Freact-uploadcare-transformations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Baspa%2Freact-uploadcare-transformations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Baspa%2Freact-uploadcare-transformations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Baspa","download_url":"https://codeload.github.com/Baspa/react-uploadcare-transformations/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239742453,"owners_count":19689315,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image-processing","react","reactjs","uploadcare","uploadcare-react"],"created_at":"2024-10-11T11:12:16.864Z","updated_at":"2026-01-09T21:30:42.070Z","avatar_url":"https://github.com/Baspa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-uploadcare-transformations\n\n[![NPM](https://img.shields.io/npm/v/react-uploadcare-transformations.svg)](https://www.npmjs.com/package/react-uploadcare-transformations) \n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n![npm](https://img.shields.io/npm/dt/react-uploadcare-transformations)\n![node-current](https://img.shields.io/node/v/react-uploadcare-transformations)\n![GitHub Workflow Status](https://img.shields.io/github/workflow/status/baspa/react-uploadcare-transformations/CodeQL)\n\nShow images that are transformed using [Uploadcare](https://uploadcare.com/?via=vk10) 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.\n\n\u003e This package is inspired by the [PHP Uploadcare Transformations](https://github.com/vormkracht10/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. \n\n\n- [Requirements](#requirements)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Documentation](#documentation)\n  * [Adding filename](#adding-filename)\n  * [Auto rotate](#auto-rotate)\n  * [Blur faces](#blur-faces)\n  * [Enhance](#enhance)\n  * [Flip](#flip)\n  * [Format](#format)\n  * [Grayscale](#grayscale)\n  * [Invert](#invert)\n  * [Miror](#miror)\n  * [Preview](#preview)\n  * [Progressive](#progressive)\n  * [Quality](#quality)\n  * [Rotate](#rotate)\n  * [Set fill](#set-fill)\n  * [Sharpen](#sharpen)\n  * [Zoom objects](#zoom-objects)\n- [Testing](#testing)\n- [Changelog](#changelog)\n- [Contributing](#contributing)\n- [Security Vulnerabilities](#security-vulnerabilities)\n- [Credits](#credits)\n- [License](#license)\n\n## Requirements\n\n- [React](https://reactjs.org/) 16.8.0 or higher\n- [Uploadcare](https://uploadcare.com/?via=vk10) account\n- [Node.js](https://nodejs.org/en/) 10.0.0 or higher\n\n## Installation\n\n```bash\nnpm install --save react-uploadcare-transformations\n# or \nyarn add react-uploadcare-transformations \n```\n\n## Usage\n\n1.  Include the `UCImage` component.\n2.  Get the UUID of the file you want to show.\n3.  Set your CDN url (optional).\n4.  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.\n5.  The component outputs an image. Want to add your own classes to the image? Simply add the `classname` property!\n\n```jsx\nimport React from 'react'\n\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst App = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      preview={{ width: 300, height: 300 }}\n      setFill={{ color: 'ff0000' }}\n    /\u003e\n  )\n}\n\nexport default App\n```\n\n### List of possible transformations\nEach transformation follows the documentation on Uploadcare which you may find \u003ca href=\"https://uploadcare.com/docs/\"\u003ehere\u003c/a\u003e. \nThe current list of possible transformations and where to find the documentation:\n\n| Transformation        | Uploadcare Documentation link           |\n| ------------- |:-------------:|\n| [Auto rotate](#auto-rotate)      | \u003ca target=\"_blank\" href=\"https://uploadcare.com/docs/transformations/image/rotate-flip/#operation-autorotate\"\u003eLink\u003c/a\u003e |\n| [Blur faces](#blur-faces) | \u003ca target=\"_blank\" href=\"https://uploadcare.com/docs/transformations/image/blur-sharpen/#operation-blur-region-faces\"\u003eLink\u003c/a\u003e      |\n| [Enhance](#enhance) | \u003ca target=\"_blank\" href=\"https://uploadcare.com/docs/transformations/image/colors/#operation-enhance\"\u003eLink\u003c/a\u003e      |\n| [Flip](#flip) | \u003ca target=\"_blank\" href=\"https://uploadcare.com/docs/transformations/image/colors/#operation-flip\"\u003eLink\u003c/a\u003e      |\n| [Format](#format) | \u003ca target=\"_blank\" href=\"https://uploadcare.com/docs/transformations/image/compression/#operation-format\"\u003eLink\u003c/a\u003e      |\n| [Grayscale](#grayscale) | \u003ca target=\"_blank\" href=\"https://uploadcare.com/docs/transformations/image/colors/#operation-grayscale\"\u003eLink\u003c/a\u003e      |\n| [Invert](#invert) | \u003ca target=\"_blank\" href=\"https://uploadcare.com/docs/transformations/image/colors/#operation-inverting\"\u003eLink\u003c/a\u003e      |\n| [Miror](#miror) | \u003ca target=\"_blank\" href=\"https://uploadcare.com/docs/transformations/image/colors/#operation-mirror\"\u003eLink\u003c/a\u003e      |\n| [Preview](#preview) | \u003ca target=\"_blank\" href=\"https://uploadcare.com/docs/transformations/image/resize-crop/#operation-preview\"\u003eLink\u003c/a\u003e      |\n| [Progressive](#progressive) | \u003ca target=\"_blank\" href=\"https://uploadcare.com/docs/transformations/image/compression/#operation-progressive\"\u003eLink\u003c/a\u003e      |\n| [Quality](#quality) | \u003ca target=\"_blank\" href=\"https://uploadcare.com/docs/transformations/image/compression/#operation-quality\"\u003eLink\u003c/a\u003e      |\n| [Rotate](#rotate) | \u003ca target=\"_blank\" href=\"https://uploadcare.com/docs/transformations/image/colors/#operation-rotate\"\u003eLink\u003c/a\u003e      |\n| [Set fill](#set-fill) | \u003ca target=\"_blank\" href=\"https://uploadcare.com/docs/transformations/image/resize-crop/#operation-setfill\"\u003eLink\u003c/a\u003e      |\n| [Sharpen](#sharpen) | \u003ca target=\"_blank\" href=\"https://uploadcare.com/docs/transformations/image/colors/#operation-sharpen\"\u003eLink\u003c/a\u003e      |\n| [Smart resize](#smart-resize) | \u003ca target=\"_blank\" href=\"https://uploadcare.com/docs/transformations/image/resize-crop/#operation-smart-resize\"\u003eLink\u003c/a\u003e      |\n| [Zoom objects](#zoom-objects) | \u003ca target=\"_blank\" href=\"https://uploadcare.com/docs/transformations/image/resize-crop/#operation-zoom-objects\"\u003eLink\u003c/a\u003e      |\n\n## Documentation\n\n### Adding filename\nOriginal 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`.\n\nYou can set an optional filename that users will see instead of the original name:\n\n```jsx\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      filename='my-image.jpg'\n      preview={{ width: 300, height: 300 }}\n    /\u003e\n  )\n}\n```\n\n### Auto rotate \nThe 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. \n  \n```jsx\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      autoRotate={false} // or true\n    /\u003e\n  )\n}\n```\n\n### Blur faces \nWhen faces is specified the regions are selected automatically by utilizing face detection.\n\n```jsx\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      blurFaces={50}\n    /\u003e\n  )\n}\n```\n### Enhance\nAuto-enhances an image by performing the following operations: auto levels, auto contrast, and saturation sharpening.\n\nStrength must be a number between 0 and 100. Default value is 50.\n  \n```jsx\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      enhance={50}\n    /\u003e\n  )\n}\n```\n### Flip\nFlips images.\n\n```jsx\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      flip\n    /\u003e\n  )\n}\n```\n### Format\nConverts an image to one of the following formats: `jpg`, `png`, `webp`, `auto`.\n\n```jsx\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      format={'jpg'}\n    /\u003e\n  )\n}\n```\n### Grayscale\nDesaturates images. The operation has no additional parameters and simply produces a grayscale image output when applied.\n\n```jsx\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      grayscale\n    /\u003e\n  )\n}\n```\n\n### Invert\nInverts images rendering a 'negative' of the input.\n\n```jsx\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      invert\n    /\u003e\n  )\n}\n```\n\n### Mirror\nMirrors images.\n\n```jsx\n\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      mirror\n    /\u003e\n  )\n}\n```\n### Preview\nDownscales an image proportionally to fit the given width and height in pixels.\n\n```jsx\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      preview={{ width: 300, height: 300 }}\n    /\u003e\n  )\n}\n```\n### Progressive \nReturns 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.\n\n```jsx\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      progressive={true} // or false\n    /\u003e\n  )\n}\n```\n### Quality\nSets 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.\n\nQuality must be one of the following values: `smart`, `smart_retina`, `normal`, `better`, `best`, `lighter`, `lightest`.\n\n```jsx\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      quality={'best'}\n    /\u003e\n  )\n}\n```\n### Rotate\nRight-angle image rotation, counterclockwise. The value of angle must be a multiple of 90.\n\n```jsx\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      rotate={90}\n    /\u003e\n  )\n}\n```\n### Set fill \nSets the fill color used with crop, stretch or when converting an alpha channel enabled image to JPEG.\n\nColor must be a hex color code \u003cb\u003ewithout using the hashtag\u003c/b\u003e.\n\n```jsx\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      setFill={{ color: 'ffffff' }}\n    /\u003e\n  )\n}\n```\n\n### Sharpen\nSharpens 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.\n\n```jsx\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      sharpen={20}\n    /\u003e\n  )\n}\n```\n\n### Smart resize \nContent-aware resize helps retaining original proportions of faces and other visually sensible objects while resizing the rest of the image using intelligent algorithms.\n\n```jsx\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      smartResize={{ width: 300, height: 300 }}\n    /\u003e\n  )\n}\n```\n\n### Zoom objects\nZoom objects operation is best suited for images with solid or uniform backgrounds.\n\nZoom must be a number between 1 and 100.\n\n```jsx\nimport { UCImage } from 'react-uploadcare-transformations'\n\nconst = () =\u003e {\n  return (\n    \u003cUCImage\n      uuid='12a3456b-c789-1234-1de2-3cfa83096e25'\n      zoomObjects={50}\n    /\u003e\n  )\n}\n```\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease review [our security policy](../-/../-/security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n-   [Bas van Dinther](https://github.com/baspa)\n-   [All Contributors](../-/../-/contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaspa%2Freact-uploadcare-transformations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaspa%2Freact-uploadcare-transformations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaspa%2Freact-uploadcare-transformations/lists"}