npmpackage.info

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

Other packages similar to react-avatar-image-cropper

simple-image-cropper

1.1.3

![alt text](https://github.com/gopendrajangir/simple-image-cropper/blob/main/simple-image-cropper-customizable%20.png)

react-avatar-crop

1.0.2

Lightweight avatar cropper

@cshancock/react-native-avatar-crop

1.3.8

Crop component to crop profile images

@ricardo-alan/react-native-avatar-crop

1.3.7

Crop component to crop profile images

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

react-avatar-image-cropper - 1.5.0 | npmpackage.info

react-avatar-image-cropper

This is a slight component without any dependencies for cropping image

1.5.0

JavaScript

1.68 MB

1.4

Installations

npm install react-avatar-image-cropper

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

14.17.5

NPM Version

6.14.14 Pull Requests

Open

5

Total

49

Closed

40

Merged

4

Issues

Open

1

Total

22

Closed

21

Releases

Unable to fetch releases

Languages

JavaScript

HTML

CSS

JavaScript (91.96%)

HTML (6.53%)

CSS (1.51%)

Developer

likeconan

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

24 Stars

57 Commits

18 Forks

2 Watchers

6 Branches

5 Contributors

Updated on Jul 26, 2024

Maintainers

View All 5 Contributors

Package Meta Information

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

NPM Version

6.14.14

Node Version

14.17.5

Published on

Feb 03, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

microbundle-crl babel-eslint cross-env eslint eslint-config-prettier eslint-config-standard eslint-config-standard-react eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise eslint-plugin-react eslint-plugin-standard gh-pages npm-run-all prettier react react-dom react-scripts

React Avatar Image Cropper

A light library without any dependencies cropping tool for React. Both working for web and mobile.

Demo

Online Demo

Installation

npm i react-avatar-image-cropper --save

Usage

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}

Props

Most of the props is used for customizing the display:

apply(required, function)

The apply function will get the cropped blob file, you can handle it whatever you want.

cancel(optional, function)

The cancel function fired when you cancel cropping.

errorHandler(optional, function)

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

isBack(optional, bool, default:false)

when there is a background image in container, pass true to change the avatar background and text color

text(optional, string or react component, default:Upload photo)

replace the initial text.

actions(optional, array of react components)

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} />

icon(optional, react component)

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}/>

loadingNode(optional, react component)

replace the initial display of loading component.

maxsize(optional, number)

set the maxsize of uploaded image, default value is 2M

1const maxsize= 1024 * 1024 *5
2
3<AvatarImageCr apply={this.apply} maxsize={maxsize}/>

className(optional, string)

set the class for the root element

iconStyle(optional, object)

set the initial icon style

textStyle(optional, object)

set the initial text style

errorStyle(optional, object)

set the error text style

rootStyle(optional, object)

set the root element style

sliderConStyle(optional, object)

set the container of slider style

sliderChildrenDiv(optional, object)

set the container div of slider style

cancelBtnStyle(optional, object)

set the cancel button style(if the there is actions prop, then the style is no working)

applyBtnStyle(optional, object)

set the apply button style(if the there is actions prop, then the style is no working)

Contributing / Developing

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.

License

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

License

Determines if the project has defined a license.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

73 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
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-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
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-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

1.4

/10

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