Gathering detailed insights and metrics for @cloudinary/react
Gathering detailed insights and metrics for @cloudinary/react
Installations
npm install @cloudinary/reactScore
95
Supply Chain
98.9
Quality
83
Maintenance
100
Vulnerability
98.9
License
Developer
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
>=10
Typescript Support
Yes
Node Version
14.19.0
NPM Version
lerna/4.0.0/node@v14.19.0+x64 (linux)
Statistics
44 Stars
407 Commits
15 Forks
17 Watching
55 Branches
17 Contributors
Updated on 14 Nov 2024
Languages
TypeScript (83.97%)
JavaScript (6.44%)
Vue (4.05%)
CSS (2.92%)
HTML (2.28%)
Shell (0.34%)
Total Downloads
Cumulative downloads
Total Downloads
2,432,676
Last day
-10.3%
5,107
Compared to previous day
Last week
1.1%
30,208
Compared to previous week
Last month
27.2%
126,131
Compared to previous month
Last year
33.5%
1,147,694
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
1
Dev Dependencies
46
@babel/preset-env@babel/preset-typescript@cloudinary/html@cloudinary/url-gen@rollup/plugin-commonjs@rollup/plugin-json@rollup/plugin-node-resolve@rollup/plugin-replace@rollup/plugin-typescript@sinonjs/fake-timers@testing-library/jest-dom@types/enzyme@types/enzyme-adapter-react-16@types/jest@types/node@types/react@types/react-dom@types/sinonjs__fake-timers@typescript-eslint/eslint-plugin@typescript-eslint/parserbabel-eslintcheeriocross-envenzymeenzyme-adapter-react-16enzyme-to-jsoneslinteslint-config-prettiereslint-config-standardeslint-config-standard-reacteslint-plugin-importeslint-plugin-nodeeslint-plugin-prettiereslint-plugin-promiseeslint-plugin-reacteslint-plugin-standardgh-pagesjestnpm-run-allprettierreactreact-domreact-scriptsrollupts-jesttypescript
Versions
Cloudinary Frontend Frameworks
About this project
This project contains SDKs designed to work with Cloudinary url-gen.
These SDKs render CloudinaryImage or CloudinaryVideo objects into the DOM.
Packages contained within this project:
-
The React SDK used to render an image & video component. NPM | {@link ReactSDK|Reference}
-
The Angular SDK used to render an image & video component. NPM | {@link AngularSDK|Reference}
Each SDK also contains advanced features in the form of plugins, which extend the native HTMLImage and HTMLVideo elements.
- {@link accessibility|accessibility} - Used to make your images more accessible to your users with visual disabilities.
- {@link lazyload|lazyload} - Used to delay loading images if they are not yet visible on the screen.
- {@link placeholder|placeholder} - Used to display a lightweight version of an image while the target image is downloading.
- {@link responsive|responsive} - Used to resize your images automatically based on the viewport size.
Development setup
To build and link project:
- clone project
- npm run quickstart
Installation
To get started, install the npm client package of your choice along with our base package. For example, to use Cloudinary in a React environment, the following packages should be installed:
1npm i @cloudinary/react @cloudinary/url-gen
Note: To use Angular install @cloudinary/ng.
Simple usage
The following is a simple example using React. For more information on React and other frameworks, navigate to the specific reference using the Packages menu.
1import React from 'react' 2// Cloudinary is used to configure your account and generate urls for your media assets 3import {Cloudinary} from "@cloudinary/url-gen"; 4// Import the cloudinary media component (AdvancedImage / AdvancedVideo), 5// and the plugins you want to use. 6import {AdvancedImage, accessibility, responsive} from '@cloudinary/react'; 7 8// Once per project/app - configure your instance. 9// See the documentation of @cloudinary/url-gen for more information. 10const myCld = new Cloudinary({cloud: {cloudName: 'demo'}}); 11 12export const App = () => { 13 // Create a new image object: 14 const img = myCld.image('sample'); 15 16 // Render your component. 17 return ( 18 <div> 19 <AdvancedImage cldImg={img} plugins={[responsive(), accessibility()]}/> 20 </div> 21 ) 22};
Plugin Order
We recommend the following order when using our plugins to achieve the best results:
1<AdvancedImage plugins={[lazyload(), responsive(), accessibility(), placeholder()]}/>
You can omit any plugin, but the order from above should remain.
Contributors
Repository is using Conventional Commits. To publish packages please read instructions in sdk-scripts.
No vulnerabilities found.
Reason
12 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 10/15 approved changesets -- score normalized to 6
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 26 are checked with a SAST tool
Reason
49 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-p493-635q-r6gr
- Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-rm97-x556-q36h
- Warn: Project is vulnerable to: GHSA-mxhp-79qh-mcx6
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-c75v-2vq8-878f
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Score
3.8
/10
Last Scanned on 2024-11-25
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More