diff --git a/cropperjs/cropperjs-tests.ts b/cropperjs/cropperjs-tests.ts
new file mode 100644
index 000000000..d328a12b4
--- /dev/null
+++ b/cropperjs/cropperjs-tests.ts
@@ -0,0 +1,2 @@
+///
+import * as Cropper from 'cropperjs';
diff --git a/cropperjs/cropperjs.d.ts b/cropperjs/cropperjs.d.ts
new file mode 100644
index 000000000..f2f8e861e
--- /dev/null
+++ b/cropperjs/cropperjs.d.ts
@@ -0,0 +1,452 @@
+// Type definitions for cropperjs
+// Project: https://github.com/fengyuanchen/cropperjs
+// Definitions by: Stepan Mikhaylyuk
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+
+declare module cropperjs {
+ export enum CropperViewMods {
+ CropBoxIsJustWithInTheContainer = 0,
+ CropBoxShouldBeWithInTheCanvas = 1,
+ CanvasShouldNotBeWithInTheContainer = 2,
+ ContainerSshouldBeWithInTheCanvas = 3
+ }
+ export interface CropperOptions {
+ /**
+ * Define the view mode of the cropper.
+ * @default 0
+ */
+ viewMode?: CropperViewMods;
+ /**
+ * Define the dragging mode of the cropper.
+ * 'crop': create a new crop box
+ * 'move': move the canvas
+ * 'none': do nothing
+ */
+ dragMode?: string;
+ /**
+ * Set the aspect ratio of the crop box. By default, the crop box is free ratio.
+ * @default Nan
+ */
+ aspectRatio?: number;
+ /**
+ * The previous cropped data if you had stored, will be passed to setData method automatically.
+ * @default null
+ */
+ data?: Object;
+ /**
+ * Add extra elements (containers) for previewing.
+ * Valid selector for Document.querySelectorAll
+ * @default ''
+ */
+ preview?: string;
+ /**
+ * Rebuild the cropper when resize the window.
+ * @default true
+ */
+ responsive?: boolean;
+ /**
+ * By default, the plugin will check the image origin, and if it is a cross-origin image,
+ * a crossOrigin attribute will be added to the image element and a timestamp will be added to the image url to reload the image for "getCroppedCanvas".
+ * By adding crossOrigin attribute to image will stop adding timestamp to image url, and stop reload of image.
+ * @default true
+ */
+ checkCrossOrigin?: boolean;
+ /**
+ * Show the black modal above the image and under the crop box.
+ * @default true
+ */
+ modal?: boolean;
+ /**
+ * Show the dashed lines above the crop box.
+ * @default true
+ */
+ guides?: boolean;
+ /**
+ * Show the center indicator above the crop box.
+ * @default true
+ */
+ center?: boolean;
+ /**
+ * Show the white modal above the crop box (highlight the crop box).
+ * @default true
+ */
+ highlight?: boolean;
+ /**
+ * Show the grid background of the container.
+ * @default true
+ */
+ background?: boolean;
+ /**
+ * Enable to crop the image automatically when initialize.
+ * @default true
+ */
+ autoCrop?: boolean;
+ /**
+ * A number between 0 and 1. Define the automatic cropping area size (percentage).
+ * @default 0.8 (80% of the image)
+ */
+ autoCropArea?: number;
+ /**
+ * Enable to move the image.
+ * @default true
+ */
+ movable?: boolean;
+ /**
+ * Enable to rotate the image.
+ * @default true
+ */
+ rotatable?: boolean;
+ /**
+ * Enable to scale the image.
+ * @default true
+ */
+ scalable?: boolean;
+ /**
+ * Enable to zoom the image.
+ * @default true
+ */
+ zoomable?: boolean;
+ /**
+ * Enable to zoom the image by dragging touch.
+ * @default true
+ */
+ zoomOnTouch?: boolean;
+ /**
+ * Enable to zoom the image by wheeling mouse.
+ * @default true
+ */
+ zoomOnWheel?: boolean;
+ /**
+ * Define zoom ratio when zoom the image by wheeling mouse.
+ * @default 0.1
+ */
+ wheelZoomRatio?: number;
+ /**
+ * Enable to move the crop box.
+ * @default true
+ */
+ cropBoxMovable?: boolean;
+ /**
+ * Enable to resize the crop box.
+ * @default true
+ */
+ cropBoxResizable?: boolean;
+ /**
+ * Enable to toggle drag mode between "crop" and "move" when click twice on the cropper.
+ * @default true
+ */
+ toggleDragModeOnDblclick?: boolean;
+ /**
+ * The minimum width of the container
+ * @default 200
+ */
+ minContainerWidth?: number;
+ /**
+ * The minimum height of the container.
+ * @default 100
+ */
+ minContainerHeight?: number;
+ /**
+ * The minimum width of the canvas (image wrapper).
+ * @default 0
+ */
+ minCanvasWidth?: number;
+ /**
+ * The minimum height of the canvas (image wrapper).
+ * @default 0
+ */
+ minCanvasHeight?: number;
+ /**
+ * The minimum width of the crop box.
+ * @default 0
+ */
+ minCropBoxWidth?: number;
+ /**
+ * The minimum height of the crop box.
+ * @default 0
+ */
+ minCropBoxHeight?: number;
+ /**
+ * This function will be called when a cropper instance starts to load an image.
+ * Return false to prevent to build
+ * @default null
+ */
+ build?: () => boolean;
+ /**
+ * This function will be called when a cropper instance has built completely.
+ * @default null
+ */
+ built?: () => void;
+ }
+ interface Data {
+ /**
+ * the offset left of the cropped area
+ */
+ x: number;
+ /**
+ * the offset top of the cropped area
+ */
+ y: number;
+ /**
+ * the width of the cropped area
+ */
+ width: number;
+ /**
+ * the height of the cropped area
+ */
+ height: number;
+ /**
+ * the rotated degrees of the image
+ */
+ rotate: number;
+ /**
+ * the scaling factor to apply on the abscissa of the image
+ */
+ scaleX: number;
+ /**
+ * the scaling factor to apply on the ordinate of the image
+ */
+ scaleY: number;
+ }
+ interface ContainerData {
+ /**
+ * The current width of the container
+ */
+ width: number;
+ /**
+ * The current height of the container
+ */
+ height: number;
+ }
+ interface CropBoxData {
+ /**
+ * the offset left of the crop box
+ */
+ left: number;
+ /**
+ * the offset top of the crop box
+ */
+ top: number;
+ /**
+ * the width of the crop box
+ */
+ width: number;
+ /**
+ * the height of the crop box
+ */
+ height: number;
+ }
+ interface CanvasData {
+ /**
+ * offset left of the canvas
+ */
+ left: number;
+ /**
+ * new offset top of the canvas
+ */
+ top: number;
+ /**
+ * new width of the canvas
+ */
+ width: number;
+ /**
+ * new height of the canvas
+ */
+ height: number;
+ }
+ interface ImageData {
+ /**
+ * the offset left of the image
+ */
+ left: number;
+ /**
+ * the offset top of the image
+ */
+ top: number;
+ /**
+ * the width of the image
+ */
+ width: number;
+ /**
+ * the height of the image
+ */
+ height: number;
+ /**
+ * the natural width of the image
+ */
+ naturalWidth: number;
+ /**
+ * the natural height of the image
+ */
+ naturalHeight: number;
+ /**
+ * the aspect ratio of the image
+ */
+ aspectRatio: number;
+ /**
+ * the rotated degrees of the image if rotated
+ */
+ rotate: number;
+ /**
+ * the scaling factor to apply on the abscissa of the image if scaled
+ */
+ scaleX: number;
+ /**
+ * the scaling factor to apply on the ordinate of the image if scaled
+ */
+ scaleY: number;
+ }
+ interface CroppedCanvasOptions {
+ /**
+ * the destination width of the output canvas
+ */
+ width?: number;
+ /**
+ * the destination height of the output canvas
+ */
+ height?: number;
+ /**
+ * a color to fill any alpha values in the output canvas
+ */
+ fillColor?: string;
+ }
+ export class Cropper {
+ constructor(element: HTMLImageElement, options: CropperOptions);
+ /**
+ * Show the crop box manually.
+ */
+ crop(): void;
+
+ /**
+ * Clear the crop box.
+ */
+ reset(): void;
+
+ /**
+ * Replace the image's src and rebuild the cropper.
+ * @param url A new image url
+ */
+ replace(url: string): void;
+
+ /**
+ * Enable (unfreeze) the cropper.
+ */
+ enable(): void;
+
+ /**
+ * Disable (freeze) the cropper
+ */
+ disable(): void;
+
+ /**
+ * Destroy the cropper and remove the instance from the image.
+ */
+ destroy(): void;
+
+ /**
+ * Move the canvas (image wrapper) with relative offsets.
+ * @param offsetX Moving size (px) in the horizontal direction.
+ * @param offsetY Moving size (px) in the vertical direction.
+ * If not present, its default value is offsetX.
+ */
+ move(offsetX: number, offsetY?: number): void;
+
+ /**
+ * Move the canvas (image wrapper) to an absolute point.
+ * @param x The left value of the canvas
+ * @param y The top value of the canvas
+ * If not present, its default value is x.
+ */
+ moveTo(x: number, y?: number): void;
+
+ /**
+ * Zoom the canvas (image wrapper) with a relative ratio.
+ * Zoom in: requires a positive number (ratio > 0)
+ * Zoom out: requires a negative number (ratio < 0)
+ */
+ zoom(ratio: number): void;
+
+ /**
+ * Rotate the canvas (image wrapper) with a relative degree.
+ * Rotate right: requires a positive number (degree > 0)
+ * Rotate left: requires a negative number (degree < 0)
+ */
+ rotate(degree: number): void;
+
+ /**
+ * Clear the crop box.
+ */
+ clear(): void;
+
+ /**
+ * Output the cropped area position and size data (base on the original image).
+ */
+ getData(rounded?: boolean): Data;
+
+ /**
+ * Change the cropped area position and size with new data (base on the original image).
+ */
+ setData(data: Data): void;
+
+ /**
+ * Output the container size data.
+ */
+ getContainerData(): ContainerData;
+
+ /**
+ * Output the image position, size and other related data.
+ */
+ getImageData(): ImageData;
+
+ /**
+ * Output the canvas (image wrapper) position and size data.
+ */
+ getCanvasData(): CanvasData & {
+ /**
+ * the natural width of the canvas (read only)
+ */
+ naturalWidth: number;
+ /**
+ * the natural height of the canvas (read only)
+ */
+ naturalHeight: number;
+ };
+
+ /**
+ * Change the canvas (image wrapper) position and size with new data.
+ */
+ setCanvasData(data: CanvasData): void;
+
+ /**
+ * Output the crop box position and size data.
+ */
+ getCropBoxData(): CropBoxData;
+
+ /**
+ * Change the crop box position and size with new data.
+ */
+ setCropBoxData(data: CropBoxData): void;
+
+ /**
+ * Get a canvas drawn the cropped image.
+ */
+ getCroppedCanvas(options?: CroppedCanvasOptions): HTMLCanvasElement;
+
+ /**
+ * Change the aspect ratio of the crop box.
+ */
+ setAspectRatio(aspectRatio: number): void;
+
+ /**
+ * Change the drag mode.
+ */
+ setDragMode(mode?: 'none' | 'crop' | 'move'): void;
+
+ }
+}
+
+declare module "cropperjs" {
+ const Cropper: typeof cropperjs.Cropper;
+ export = Cropper;
+}
diff --git a/react-cropper/react-cropper-tests.tsx b/react-cropper/react-cropper-tests.tsx
new file mode 100644
index 000000000..4aef0fbef
--- /dev/null
+++ b/react-cropper/react-cropper-tests.tsx
@@ -0,0 +1,28 @@
+///
+///
+
+
+import * as React from 'react';
+import Cropper from 'react-cropper';
+// If you choose not to use import, you need to assign Cropper to default
+// var Cropper = require('react-cropper').default
+
+class Demo extends React.Component<{}, {}> {
+ crop() {
+ // image in dataUrl
+ console.log((this.refs['cropper'] as any).getCroppedCanvas().toDataURL());
+ }
+
+ render() {
+ return (
+
+ );
+ }
+}
diff --git a/react-cropper/react-cropper.d.ts b/react-cropper/react-cropper.d.ts
new file mode 100644
index 000000000..11775d018
--- /dev/null
+++ b/react-cropper/react-cropper.d.ts
@@ -0,0 +1,153 @@
+// Type definitions for react-cropper
+// Project: https://github.com/roadmanfong/react-cropper
+// Definitions by: Stepan Mikhaylyuk
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+///
+///
+
+declare module 'react-cropper' {
+ import Data = cropperjs.Data;
+ import ContainerData = cropperjs.ContainerData;
+ import ImageData = cropperjs.ImageData;
+ import CanvasData = cropperjs.CanvasData;
+ import CropBoxData = cropperjs.CropBoxData;
+ import CroppedCanvasOptions = cropperjs.CroppedCanvasOptions;
+ type ReactCropperProps = cropperjs.CropperOptions & __React.HTMLProps;
+
+ class ReactCropper extends __React.Component implements cropperjs.Cropper {
+
+ /**
+ * Show the crop box manually.
+ */
+ crop(): void;
+
+ /**
+ * Clear the crop box.
+ */
+ reset(): void;
+
+ /**
+ * Replace the image's src and rebuild the cropper.
+ * @param url A new image url
+ */
+ replace(url: string): void;
+
+ /**
+ * Enable (unfreeze) the cropper.
+ */
+ enable(): void;
+
+ /**
+ * Disable (freeze) the cropper
+ */
+ disable(): void;
+
+ /**
+ * Destroy the cropper and remove the instance from the image.
+ */
+ destroy(): void;
+
+ /**
+ * Move the canvas (image wrapper) with relative offsets.
+ * @param offsetX Moving size (px) in the horizontal direction.
+ * @param offsetY Moving size (px) in the vertical direction.
+ * If not present, its default value is offsetX.
+ */
+ move(offsetX: number, offsetY?: number): void;
+
+ /**
+ * Move the canvas (image wrapper) to an absolute point.
+ * @param x The left value of the canvas
+ * @param y The top value of the canvas
+ * If not present, its default value is x.
+ */
+ moveTo(x: number, y?: number): void;
+
+ /**
+ * Zoom the canvas (image wrapper) with a relative ratio.
+ * Zoom in: requires a positive number (ratio > 0)
+ * Zoom out: requires a negative number (ratio < 0)
+ */
+ zoom(ratio: number): void;
+
+ /**
+ * Rotate the canvas (image wrapper) with a relative degree.
+ * Rotate right: requires a positive number (degree > 0)
+ * Rotate left: requires a negative number (degree < 0)
+ */
+ rotate(degree: number): void;
+
+ /**
+ * Clear the crop box.
+ */
+ clear(): void;
+
+ /**
+ * Output the cropped area position and size data (base on the original image).
+ */
+ getData(rounded?: boolean): Data;
+
+ /**
+ * Change the cropped area position and size with new data (base on the original image).
+ */
+ setData(data: Data): void;
+
+ /**
+ * Output the container size data.
+ */
+ getContainerData(): ContainerData;
+
+ /**
+ * Output the image position, size and other related data.
+ */
+ getImageData(): ImageData;
+
+ /**
+ * Output the canvas (image wrapper) position and size data.
+ */
+ getCanvasData(): CanvasData & {
+ /**
+ * the natural width of the canvas (read only)
+ */
+ naturalWidth: number;
+ /**
+ * the natural height of the canvas (read only)
+ */
+ naturalHeight: number;
+ };
+
+ /**
+ * Change the canvas (image wrapper) position and size with new data.
+ */
+ setCanvasData(data: CanvasData): void;
+
+ /**
+ * Output the crop box position and size data.
+ */
+ getCropBoxData(): CropBoxData;
+
+ /**
+ * Change the crop box position and size with new data.
+ */
+ setCropBoxData(data: CropBoxData): void;
+
+ /**
+ * Get a canvas drawn the cropped image.
+ */
+ getCroppedCanvas(options?: CroppedCanvasOptions): HTMLCanvasElement;
+
+ /**
+ * Change the aspect ratio of the crop box.
+ */
+ setAspectRatio(aspectRatio: number): void;
+
+ /**
+ * Change the drag mode.
+ */
+ setDragMode(mode?: 'none' | 'crop' | 'move'): void;
+
+ on(eventname: string, callback: () => void): void;
+ }
+ export default ReactCropper;
+}