@cloudinary/react
Advanced tools
| { | ||
| "name": "@cloudinary/react", | ||
| "version": "1.14.1", | ||
| "version": "1.14.2", | ||
| "description": "Cloudinary React SDK", | ||
@@ -76,4 +76,4 @@ "author": "cloudinary", | ||
| "dependencies": { | ||
| "@cloudinary/html": "^1.13.2" | ||
| "@cloudinary/html": "^1.13.3" | ||
| } | ||
| } |
+3
-3
| { | ||
| "name": "@cloudinary/react", | ||
| "version": "1.14.1", | ||
| "version": "1.14.2", | ||
| "description": "Cloudinary React SDK", | ||
@@ -76,5 +76,5 @@ "author": "cloudinary", | ||
| "dependencies": { | ||
| "@cloudinary/html": "^1.13.2" | ||
| "@cloudinary/html": "^1.13.3" | ||
| }, | ||
| "gitHead": "c7228e41699379eece7d5136e26ed19726814bdc" | ||
| "gitHead": "41d70d4edd37def70d8791c7f750f9ca52390d1b" | ||
| } |
| 1.11.2 / 2023-03-20 | ||
| ================== | ||
| Html | ||
| ------- | ||
| * fix: return last plugin response | ||
| 1.11.1 / 2023-03-09 | ||
| ================== | ||
| Html | ||
| ------- | ||
| * fix: fix placeholder plugin token | ||
| 1.11.0 / 2023-02-21 | ||
| ================== | ||
| Html | ||
| ------- | ||
| * test: add tests for HtmlImageLayer destroy | ||
| * fix: cleanup html layer on component unmount | ||
| React | ||
| ------- | ||
| * fix: Unmount HtmlImageLayer instance on component unmount | ||
| 1.10.0 / 2023-02-13 | ||
| ================== | ||
| Vue | ||
| ------- | ||
| * feature: add reference docs for the new Vue SDK | ||
| 1.9.1 / 2023-02-06 | ||
| ================== | ||
| Html | ||
| ------- | ||
| * Add analytics features to plugins | ||
| 1.9.0 / 2023-01-17 | ||
| ================== | ||
| Angular | ||
| ------- | ||
| * feature: add cldPoster property with support for auto | ||
| React | ||
| ------- | ||
| * feature: add cldPoster property with support for auto | ||
| Vue | ||
| ------- | ||
| * feature: add cldPoster property with support for auto | ||
| 1.8.1 / 2023-01-11 | ||
| ================== | ||
| Html | ||
| ------- | ||
| * fix: pass analytics options down to the plugins, and use it in placeholder & responsive | ||
| 1.8.0 / 2023-01-03 | ||
| ================== | ||
| Angular | ||
| ------- | ||
| * Add playground app | ||
| React | ||
| ------- | ||
| * Improve video props type | ||
| Vue | ||
| ------- | ||
| * Add the advanced video component | ||
| Html | ||
| ------- | ||
| * fix: guard html image layer analytics options | ||
| React | ||
| ------- | ||
| * fix: change playground package name | ||
| * fix: use cloudinary favicon in playground | ||
| * fix: use responsive plugin in react playground | ||
| * fix: fix react playground by using vite | ||
| Vue | ||
| ------------------ | ||
| * chore: package @cloudinary/vue3 was renamed to @cloudinary/vue | ||
| * fix: fix analytic token in SSR | ||
| * fix: fix broken src attribute in SSR | ||
| 1.6.0 / 2022-11-17 | ||
| ================== | ||
| Html | ||
| ------- | ||
| * Add an optional analytics option to be passed to serverSideSrc | ||
| React | ||
| ------- | ||
| * use the same analytics token in react ssr and csr | ||
| 1.5.0 / 2022-09-18 | ||
| ================== | ||
| Vue 3 | ||
| ------------------ | ||
| * Release first version of @cloudinary/vue3 SDK | ||
| React | ||
| ------------------ | ||
| * Fix react jest configuration (#173) | ||
| * Update React SDK readme (#175) | ||
| Docs: | ||
| ------------------ | ||
| * Update README example (#168) | ||
| 1.4.2 / 2022-08-09 | ||
| ================== | ||
| Angular | ||
| ------------------ | ||
| * Fix angular package version (#150) | ||
| VUE3 | ||
| ------------------ | ||
| * Test vue3 responsive (#160) | ||
| * Test vue3 placeholder (#159) | ||
| * Test vue3 lazyload (#158) | ||
| * Test vue3 analytics (#157) | ||
| * Test vue3 accessibility tests (#156) | ||
| * Add vue3 advanced image (#153) | ||
| * Add vue3 sdk base with a build script (#151) | ||
| 1.4.1 / 2022-05-31 | ||
| ================== | ||
| * Fix wrong README links (#148) | ||
| 1.4.0 / 2022-05-11 | ||
| ================== | ||
| React | ||
| ------- | ||
| * Fix incorrect responsive behavior with SSR responsive (#147) | ||
| Angular | ||
| ------- | ||
| * Fix incorrect responsive behavior with SSR responsive (#147) | ||
| * Add Angular 12 as peer dep (#146) | ||
| 1.3.0 / 2022-04-11 | ||
| ================== | ||
| React | ||
| ------- | ||
| * Add peer dependency for react 18 (#145) | ||
| Angular | ||
| ------- | ||
| * Update README.md (#144) | ||
| * Remove production mode (#143) | ||
| 1.2.2 / 2022-03-28 | ||
| ================== | ||
| * fix svelte build requirements (#141) | ||
| 1.2.1 / 2022-03-24 | ||
| ================== | ||
| * bump minimist version (#142) | ||
| 1.2.0 / 2022-03-13 | ||
| ================== | ||
| React | ||
| ------- | ||
| * Responsive Plugin will now respect steps to define max width (#133) | ||
| Angular | ||
| ------- | ||
| * Responsive Plugin will now respect steps to define max width (#133) | ||
| Html | ||
| ------- | ||
| * Update htmlVideo to use the right format for ogg/ogv (#138) | ||
| * Adjust package.json fields (#136) | ||
| 1.1.0 / 2022-02-13 | ||
| ================== | ||
| React | ||
| ------- | ||
| * Replace micro-bundle with rollup (#131) | ||
| Angular | ||
| ------- | ||
| * Fix muted attribute on angular video (#126) | ||
| * Add video reference (#127) | ||
| 1.0.1 / 2022-01-05 | ||
| ================== | ||
| Other changes | ||
| ----------------- | ||
| * Added missing comments | ||
| 1.0.0 / 2022-01-04 | ||
| ================== | ||
| New functionality | ||
| ----------------- | ||
| * Feature/add analytics (#114) | ||
| Breaking changes | ||
| ----------------- | ||
| * Change plugin input to object instead of string (#119) | ||
| Other changes | ||
| ----------------- | ||
| * Update url-gen version | ||
| * Update issue templates | ||
| * Update pull_request_template.md | ||
| * Add test for muted video (#122) | ||
| * Fix video src url with analytics (#121) | ||
| * Add img attributes to angular (#118 | ||
| 1.0.0-beta.14 / 2021-12-5 | ||
| ================== | ||
| * update readme for packages (#108) | ||
| * resolve broken ts imports (#109) | ||
| * rename angular package (#107) | ||
| 1.0.0-beta.13 / 2021-11-30 | ||
| ================== | ||
| * Add Lerna (#104) | ||
| 1.0.0-beta.11 / 2021-09-14 | ||
| ================== | ||
| * updated to html to latest version (#96) | ||
| 1.0.0-beta.10 / 2021-09-14 | ||
| ================== | ||
| New functionality | ||
| ----------------- | ||
| * added autoOptimalBreakpoints to picture tag (#86) | ||
| Other changes | ||
| ----------------- | ||
| * changed to url-gen package name (#94) | ||
| 1.0.0-beta.9 / 2021-07-04 | ||
| ================== | ||
| * Fix/common js build (#87) | ||
| * Add advanced picture (#84) | ||
| 1.0.0-beta.8 / 2021-05-12 | ||
| ================== | ||
| Other changes | ||
| ----------------- | ||
| * Release pipeline testing | ||
| 1.0.0-beta.7 / 2021-05-12 | ||
| ================== | ||
| Other changes | ||
| ----------------- | ||
| * Fix svelte npm package file contents | ||
| 1.0.0-beta.6 / 2021-05-11 | ||
| ================== | ||
| Other changes | ||
| ----------------- | ||
| * Release pipeline testing | ||
| 1.0.0-beta.4 / 2021-05-09 | ||
| ================== | ||
| New functionality | ||
| ----------------- | ||
| * align video attributes in React and Angular(#77) | ||
| * Added ondestroy lifecycle hook to video component (#78) | ||
| Other changes | ||
| ----------------- | ||
| * Disable package-lock generation by adding .npmrc config | ||
| * Feature/add vue sdk infrastructure (#74) | ||
| * Add dynamic copy right date (#76) | ||
| 1.0.0-beta.3 / 2021-04-12 | ||
| ================== | ||
| New functionality | ||
| ----------------- | ||
| * React - Add innerRef prop to AdvanceVideo component (#65) | ||
| * React - Add video component (#59) | ||
| * Shared(Breaking) - Update video sources to accept Transcode action (#64) | ||
| Other changes | ||
| ----------------- | ||
| * Svelte - Fix ts errors by adding importsNotUsedAsValues rule (#68) | ||
| * Angular - Add enableProdMode() (#63) | ||
| * Svelte tests - Add svelte ssr tests (#62) | ||
| * Svelte tests - Add responsive unit tests for svelte sdk (#60) | ||
| * Angular tests - add missing angular tests (#61) | ||
| * React tests - add react e2e tests (#58) | ||
| * Svelte docs - Add svelte sdk docs (#57) | ||
| * React - Update dependency of react version to be ^16.3.0 || ^17.0.0 (#49) | ||
| * Shared - fix status canceled error on placeholder (#54) | ||
| * Shared - Feature/add video layer (#52) | ||
| 1.0.0-beta.1 / 2021-02-24 | ||
| ================== | ||
| New functionality | ||
| ----------------- | ||
| * Add svelte sdk (#48) | ||
| Other changes | ||
| ----------------- | ||
| * Upgrade to base beta (#51) | ||
| * Handle placeholder onerror (#46) | ||
| * Add travis.yml file (#50) | ||
| * Docs - Add version number to the docs reference (#47) | ||
| * Docs - Finalize readme before release (#45) | ||
| 1.0.0-beta.0 / 2021-02-02 | ||
| ================== | ||
| Other changes | ||
| --------------- | ||
| * Beta release | ||
| 1.0.0-alpha.5 / 2021-02-02 | ||
| ================== | ||
| Other changes | ||
| --------------- | ||
| * Add changelog | ||
| * Test full release-cycle using jenkins | ||
| 1.0.0-alpha.4 / 2021-01-31 | ||
| ========================== | ||
| Initial Release | ||
| ------------- | ||
| * Implement plugins - Responsive, Placeholder, Accessibility, Lazyload | ||
| * Implement React and Angular image components |
-21
| MIT License | ||
| Copyright (c) 2020 Cloudinary | ||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
| in the Software without restriction, including without limitation the rights | ||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| copies of the Software, and to permit persons to whom the Software is | ||
| furnished to do so, subject to the following conditions: | ||
| The above copyright notice and this permission notice shall be included in all | ||
| copies or substantial portions of the Software. | ||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| SOFTWARE. |
-139
| Cloudinary React SDK | ||
| ========================= | ||
| ## About | ||
| The Cloudinary React SDK allows you to quickly and easily integrate your application with Cloudinary. | ||
| Effortlessly optimize and transform your cloud's assets. | ||
| #### Note | ||
| This Readme provides basic installation and usage information. | ||
| For the complete documentation, see the [React SDK Guide](https://cloudinary.com/documentation/react_integration). | ||
| ## Table of Contents | ||
| - [Cloudinary React SDK](#cloudinary-react-sdk) | ||
| - [About](#about) | ||
| - [Note](#note) | ||
| - [Table of Contents](#table-of-contents) | ||
| - [Key Features](#key-features) | ||
| - [Version Support](#version-support) | ||
| - [Installation](#installation) | ||
| - [Install using your favorite package manager (yarn, npm)](#install-using-your-favorite-package-manager-yarn-npm) | ||
| - [Usage](#usage) | ||
| - [Setup](#setup) | ||
| - [Transform and Optimize Assets](#transform-and-optimize-assets) | ||
| - [Generate Image and Video HTML Tags](#generate-image-and-video-html-tags) | ||
| - [Advanced Plugin Features](#advanced-plugin-features) | ||
| - [File upload](#file-upload) | ||
| - [Contributions](#contributions) | ||
| - [Get Help](#get-help) | ||
| - [About Cloudinary](#about-cloudinary) | ||
| - [Additional Resources](#additional-resources) | ||
| - [License](#license) | ||
| ## Key Features | ||
| - [Transform](https://cloudinary.com/documentation/react_video_manipulation#video_transformation_examples) and | ||
| [optimize](https://cloudinary.com/documentation/react_image_manipulation#image_optimizations) assets. | ||
| - Generate [image](https://cloudinary.com/documentation/react_image_manipulation#deliver_and_transform_images) and | ||
| [video](https://cloudinary.com/documentation/react_video_manipulation#video_element) tags. | ||
| ## Version Support | ||
| | SDK Version | React 16 | React 17 | React 18 | | ||
| |---------------|------------|----------|----------| | ||
| | 1.0.0 & up | V | V | V | | ||
| ## Installation | ||
| ### Install using your favorite package manager (yarn, npm) | ||
| ```bash | ||
| npm i @cloudinary/url-gen @cloudinary/react --save | ||
| ``` | ||
| Or | ||
| ```bash | ||
| yarn add @cloudinary/url-gen @cloudinary/react --save | ||
| ``` | ||
| ## Usage | ||
| ### Setup | ||
| ```javascript | ||
| import React from 'react'; | ||
| import { AdvancedImage } from '@cloudinary/react' | ||
| import { Cloudinary } from '@cloudinary/url-gen'; | ||
| ``` | ||
| ### Transform and Optimize Assets | ||
| - [See full documentation](https://cloudinary.com/documentation/react_image_manipulation) | ||
| ```tsx | ||
| import { AdvancedImage } from '@cloudinary/react' | ||
| import { Cloudinary } from '@cloudinary/url-gen'; | ||
| const myCld = new Cloudinary({ | ||
| cloud: { | ||
| cloudName: "demo", | ||
| }, | ||
| }); | ||
| let img = myCld.image('sample'); | ||
| const App = () => { | ||
| return <AdvancedImage cldImg={img}/> | ||
| }; | ||
| ``` | ||
| ### Generate Image and Video HTML Tags | ||
| - Use <AdvancedImage> to generate image tags | ||
| - Use <AdvancedVideo> to generate video tags | ||
| ### Advanced Plugin Features | ||
| - [See full documentation](https://cloudinary.com/documentation/react_integration#plugins) | ||
| <br/><br/> | ||
| We recommend the following order when using our plugins to achieve the best results: | ||
| <br/><br/> | ||
| ```tsx | ||
| import { CloudinaryImage } from "@cloudinary/url-gen"; | ||
| import { | ||
| lazyload, | ||
| responsive, | ||
| accessibility, | ||
| placeholder | ||
| } from "@cloudinary/react"; | ||
| cloudinaryImage = new CloudinaryImage("sample", { cloudName: "demo" }); | ||
| const App = () => { | ||
| return <AdvancedImage cldImg={img} plugins={[lazyload(),responsive(), accessibility(), placeholder()]} />; | ||
| }; | ||
| ``` | ||
| You can omit any plugin, but the order from above should remain. | ||
| ### File upload | ||
| This SDK does not provide file upload functionality, however there are [several methods of uploading from the client side](https://cloudinary.com/documentation/react_image_and_video_upload). | ||
| ## Contributions | ||
| - Ensure tests run locally (```npm run test```) | ||
| - Open a PR and ensure Travis tests pass | ||
| ## Get Help | ||
| If you run into an issue or have a question, you can either: | ||
| - [Open a Github issue](https://github.com/cloudinary/frontend-frameworks/issues) (for issues related to the SDK) | ||
| - [Open a support ticket](https://cloudinary.com/contact) (for issues related to your account) | ||
| ## About Cloudinary | ||
| Cloudinary is a powerful media API for websites and mobile apps alike, Cloudinary enables developers to efficiently manage, transform, optimize, and deliver images and videos through multiple CDNs. Ultimately, viewers enjoy responsive and personalized visual-media experiences—irrespective of the viewing device. | ||
| ## Additional Resources | ||
| - [Cloudinary Transformation and REST API References](https://cloudinary.com/documentation/cloudinary_references): Comprehensive references, including syntax and examples for all SDKs. | ||
| - [MediaJams.dev](https://mediajams.dev/): Bite-size use-case tutorials written by and for Cloudinary Developers | ||
| - [DevJams](https://www.youtube.com/playlist?list=PL8dVGjLA2oMr09amgERARsZyrOz_sPvqw): Cloudinary developer podcasts on YouTube. | ||
| - [Cloudinary Academy](https://training.cloudinary.com/): Free self-paced courses, instructor-led virtual courses, and on-site courses. | ||
| - [Code Explorers and Feature Demos](https://cloudinary.com/documentation/code_explorers_demos_index): A one-stop shop for all code explorers, Postman collections, and feature demos found in the docs. | ||
| - [Cloudinary Roadmap](https://cloudinary.com/roadmap): Your chance to follow, vote, or suggest what Cloudinary should develop next. | ||
| - [Cloudinary Facebook Community](https://www.facebook.com/groups/CloudinaryCommunity): Learn from and offer help to other Cloudinary developers. | ||
| - [Cloudinary Account Registration](https://cloudinary.com/users/register/free): Free Cloudinary account registration. | ||
| - [Cloudinary Website](https://cloudinary.com): Learn about Cloudinary's products, partners, customers, pricing, and more. | ||
| ## License | ||
| Released under the MIT license. |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
631718
-2.16%11
-21.43%Updated