cropper-react - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

build/index.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { MutableRefObject } from 'react';
 import NativeCropper from 'cropperjs';
@@ -7,4 +7,4 @@ export interface Props extends NativeCropper.Options {
 }
-export declare const Cropper: (props: Props, ref: React.MutableRefObject<HTMLImageElement>) => JSX.Element;
+export declare const Cropper: (props: Props, ref: MutableRefObject<HTMLImageElement>) => JSX.Element;
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLImageElement>>;
 export default _default;

package.json

 {
   "name": "cropper-react",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "CropperJs as react component using react hooks internally",
@@ -32,24 +32,26 @@ "scripts": {
   "devDependencies": {
-    "@babel/core": "^7.8.7",
-    "@storybook/addon-info": "^5.3.17",
-    "@storybook/react": "^5.2.8",
-    "@storybook/theming": "^5.3.17",
+    "@babel/core": "^7.9.6",
+    "@storybook/addon-docs": "^5.3.18",
+    "@storybook/addon-info": "^5.3.18",
+    "@storybook/preset-typescript": "^3.0.0",
+    "@storybook/react": "^5.3.18",
+    "@storybook/theming": "^5.3.18",
     "@types/cropperjs": "^1.3.0",
-    "@types/react": "^16.9.23",
-    "@types/react-dom": "^16.9.5",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
     "@types/react-test-renderer": "^16.9.2",
-    "@typescript-eslint/eslint-plugin": "^2.23.0",
-    "@typescript-eslint/parser": "^2.23.0",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
     "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.0.6",
-    "cropperjs": "^1.5.6",
+    "babel-loader": "^8.1.0",
     "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "fork-ts-checker-webpack-plugin": "^4.1.3",
     "prettier": "^1.19.1",
-    "react": "^16.13.0",
-    "react-docgen-typescript-loader": "^3.7.1",
-    "react-dom": "^16.13.0",
-    "react-test-renderer": "^16.13.0",
-    "rollup": "^2.0.6",
+    "react": "^16.13.1",
+    "react-docgen-typescript-loader": "^3.7.2",
+    "react-dom": "^16.13.1",
+    "react-test-renderer": "^16.13.1",
+    "rollup": "^2.10.0",
     "rollup-plugin-commonjs": "^10.1.0",
@@ -59,3 +61,4 @@ "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-typescript2": "^0.26.0",
-    "typescript": "^3.8.3"
+    "ts-loader": "^7.0.4",
+    "typescript": "^3.9.2"
   },
@@ -62,0 +65,0 @@ "dependencies": {

README.md

 # cropper-react
 
 [CropperJs](https://github.com/fengyuanchen/cropperjs) as a react component
+
+### Installation
+
+```sh
+$ npm install cropper-react
+```
+
+### Usage
+```js
+import Cropper from "cropper-react";
+
+const buttonStyle = {
+  border: '1px solid #ccc',
+  padding: '5px 15px',
+  fontSize: '16px',
+  color: 'black',
+  background: 'white',
+  marginTop: '20px'
+};
+export const MyCropper = () => {
+  const image = useRef<HTMLImageElement>();
+  const cropImage = useCallback(() => {
+    const dataUrl = image.current.cropper.getCroppedCanvas({ width: 624 }).toDataURL('image/jpeg', 0.9);
+    console.log(dataUrl); // do something with the image, save to server etc
+  }, [image]);
+  return (<div>
+    <div style={{ height: '500px' }}>
+      <Cropper ref={image} image="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" />
+    </div>
+    <button style={buttonStyle} onClick={cropImage}>Crop Image</button>
+  </div >)
+};
+```
+
+### Props
+
+Supports same props as [CropperJs](https://github.com/fengyuanchen/cropperjs/blob/master/README.md#options) see [example and docs](https://mohamedfasil.github.io/cropper-react/?path=/docs/cropper--default-view) 
+
+
+### Development
+
+Want to contribute? Great! please open a PR [here](https://github.com/mohamedfasil/cropper-react/pulls)

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

691694

0.21%

Number of lines in readme file

46

1050%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dev dependency count

30

11.11%

No dependency changes