Gathering detailed insights and metrics for react-avatar-image-cropper
Gathering detailed insights and metrics for react-avatar-image-cropper
Gathering detailed insights and metrics for react-avatar-image-cropper
Gathering detailed insights and metrics for react-avatar-image-cropper
simple-image-cropper

react-avatar-crop
Lightweight avatar cropper
@cshancock/react-native-avatar-crop
Crop component to crop profile images
@ricardo-alan/react-native-avatar-crop
Crop component to crop profile images
This is a slight component without any dependencies for cropping image
npm install react-avatar-image-cropper
Typescript
Module System
Node Version
NPM Version
JavaScript (91.96%)
HTML (6.53%)
CSS (1.51%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
24 Stars
57 Commits
18 Forks
2 Watchers
6 Branches
5 Contributors
Updated on Jul 26, 2024
Latest Version
1.5.0
Package Id
react-avatar-image-cropper@1.5.0
Unpacked Size
1.68 MB
Size
427.77 kB
File Count
25
NPM Version
6.14.14
Node Version
14.17.5
Published on
Feb 03, 2023
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
19
A light library without any dependencies cropping tool for React. Both working for web and mobile.
npm i react-avatar-image-cropper --save
Include the main js module, e.g:
1import AvatarImageCropper from 'react-avatar-image-cropper'; 2
also you can implement the library as external js, add the script in build directory like below:
1<script src="/dist/index.js"></script>
you will get the AvatarImageCropper in window object.
Set the container for cropper and pass apply function for handling cropped file, e.g:
1apply = (file) => { 2 // handle the blob file you want 3 // such as get the image src 4 var src = window.URL.createObjectURL(file); 5} 6render() { 7 return ( 8 <div style={{ width: '250px', height: '250px', margin: 'auto', border: '1px solid black' }}> 9 <AvatarImageCr apply={this.apply} /> 10 </div> 11 ); 12}
Most of the props is used for customizing the display:
The apply function will get the cropped blob file, you can handle it whatever you want.
The cancel function fired when you cancel cropping.
When the file is not image of png/jpg/jpeg or the file size exceed maxsize(default is 2M), the error message will displayed inside container as default. You can handle the error with errorHandler, then the default behavoir will not be fired again. With errorHandler, when file is not image return "not_image", when exceeded size return "maxsize".
1errorHandler = (type) => { 2 console.log(type); 3} 4<AvatarImageCr apply={this.apply} errorHandler={this.errorHandler} /> 5
when there is a background image in container, pass true to change the avatar background and text color
replace the initial text.
replace the cancel/apply buttons with customized button. The first one must be as cancel, and the second one must be as apply
1const actions = [ 2 <button key={0}>test_cancel</button>, 3 <button key={1}>test_apply</button>, 4 ] 5 <AvatarImageCr apply={this.apply} actions={actions} />
replace the initial display of icon.
1const icon = ( 2 <svg viewBox="0 0 24 24" style={this.iconStyle}> 3 <circle cx="12" cy="12" r="3.2"></circle> 4 <path 5 d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"></path> 6 </svg> 7 ) 8 9<AvatarImageCr apply={this.apply} icon={icon}/>
replace the initial display of loading component.
set the maxsize of uploaded image, default value is 2M
1const maxsize= 1024 * 1024 *5 2 3<AvatarImageCr apply={this.apply} maxsize={maxsize}/>
set the class for the root element
set the initial icon style
set the initial text style
set the error text style
set the root element style
set the container of slider style
set the container div of slider style
set the cancel button style(if the there is actions prop, then the style is no working)
set the apply button style(if the there is actions prop, then the style is no working)
To view the demo or develop,open the demo directory and under it,
npm install
npm start
you can open localhost:8080 in a browser to try.
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
Found 3/23 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
license file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
73 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
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