react-image-crop

  • Version 11.0.5
  • Published
  • 110 kB
  • No dependencies
  • ISC license

Install

npm i react-image-crop
yarn add react-image-crop
pnpm add react-image-crop

Overview

A responsive image cropping tool for React

Index

Variables

variable defaultCrop

const defaultCrop: PixelCrop;

    Functions

    function areCropsEqual

    areCropsEqual: (cropA: Partial<Crop>, cropB: Partial<Crop>) => boolean;

      function centerCrop

      centerCrop: {
      (
      crop: Pick<PercentCrop, 'unit'> & Partial<Omit<PercentCrop, 'unit'>>,
      containerWidth: number,
      containerHeight: number
      ): PercentCrop;
      (
      crop: Pick<PixelCrop, 'unit'> & Partial<Omit<PixelCrop, 'unit'>>,
      containerWidth: number,
      containerHeight: number
      ): PixelCrop;
      };

        function clamp

        clamp: (num: number, min: number, max: number) => number;

          function cls

          cls: (...args: unknown[]) => string;

            function containCrop

            containCrop: (
            pixelCrop: PixelCrop,
            aspect: number,
            ord: Ords,
            containerWidth: number,
            containerHeight: number,
            minWidth?: number,
            minHeight?: number,
            maxWidth?: number,
            maxHeight?: number
            ) => { unit: 'px'; x: number; y: number; width: number; height: number };

              function convertToPercentCrop

              convertToPercentCrop: (
              crop: Partial<Crop>,
              containerWidth: number,
              containerHeight: number
              ) => PercentCrop;

                function convertToPixelCrop

                convertToPixelCrop: (
                crop: Partial<Crop>,
                containerWidth: number,
                containerHeight: number
                ) => PixelCrop;

                  function makeAspectCrop

                  makeAspectCrop: {
                  (
                  crop: Pick<PercentCrop, 'unit'> & Partial<Omit<PercentCrop, 'unit'>>,
                  aspect: number,
                  containerWidth: number,
                  containerHeight: number
                  ): PercentCrop;
                  (
                  crop: Pick<PixelCrop, 'unit'> & Partial<Omit<PixelCrop, 'unit'>>,
                  aspect: number,
                  containerWidth: number,
                  containerHeight: number
                  ): PixelCrop;
                  };

                    function nudgeCrop

                    nudgeCrop: (
                    pixelCrop: PixelCrop,
                    key: string,
                    offset: number,
                    ord: Ords
                    ) => { unit: 'px'; x: number; y: number; width: number; height: number };

                      Classes

                      class Component

                      class ReactCrop extends PureComponent<ReactCropProps, ReactCropState> {}

                        property componentRef

                        componentRef: React.RefObject<HTMLDivElement>;

                          property defaultProps

                          static defaultProps: {
                          ariaLabels: {
                          cropArea: string;
                          nwDragHandle: string;
                          nDragHandle: string;
                          neDragHandle: string;
                          eDragHandle: string;
                          seDragHandle: string;
                          sDragHandle: string;
                          swDragHandle: string;
                          wDragHandle: string;
                          };
                          };

                            property docMoveBound

                            docMoveBound: boolean;

                              property document

                              readonly document: Document;

                                property dragStarted

                                dragStarted: boolean;

                                  property evData

                                  evData: EVData;

                                    property initChangeCalled

                                    initChangeCalled: boolean;

                                      property instanceId

                                      instanceId: string;

                                        property mediaRef

                                        mediaRef: React.RefObject<HTMLDivElement>;

                                          property mouseDownOnCrop

                                          mouseDownOnCrop: boolean;

                                            property nudgeStep

                                            static nudgeStep: number;

                                              property nudgeStepLarge

                                              static nudgeStepLarge: number;

                                                property nudgeStepMedium

                                                static nudgeStepMedium: number;

                                                  property onComponentKeyDown

                                                  onComponentKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;

                                                    property onComponentPointerDown

                                                    onComponentPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;

                                                      property onCropPointerDown

                                                      onCropPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;

                                                        property onDocPointerDone

                                                        onDocPointerDone: (e: PointerEvent) => void;

                                                          property onDocPointerMove

                                                          onDocPointerMove: (e: PointerEvent) => void;

                                                            property onDragFocus

                                                            onDragFocus: () => void;

                                                              property onHandlerKeyDown

                                                              onHandlerKeyDown: (e: React.KeyboardEvent<HTMLDivElement>, ord: Ords) => void;

                                                                property resizeObserver

                                                                resizeObserver?: ResizeObserver;

                                                                  property state

                                                                  state: ReactCropState;

                                                                    property xOrds

                                                                    static xOrds: string[];

                                                                      property xyOrds

                                                                      static xyOrds: string[];

                                                                        property yOrds

                                                                        static yOrds: string[];

                                                                          method bindDocMove

                                                                          bindDocMove: () => void;

                                                                            method componentDidUpdate

                                                                            componentDidUpdate: (prevProps: ReactCropProps) => void;

                                                                              method componentWillUnmount

                                                                              componentWillUnmount: () => void;

                                                                                method dragCrop

                                                                                dragCrop: () => PixelCrop;

                                                                                  method getBox

                                                                                  getBox: () => Rectangle;

                                                                                    method getCropStyle

                                                                                    getCropStyle: () =>
                                                                                    | { top: string; left: string; width: string; height: string }
                                                                                    | undefined;

                                                                                      method getPointRegion

                                                                                      getPointRegion: (
                                                                                      box: Rectangle,
                                                                                      origOrd: Ords | undefined,
                                                                                      minWidth: number,
                                                                                      minHeight: number
                                                                                      ) => XYOrds;

                                                                                        method makePixelCrop

                                                                                        makePixelCrop: (box: Rectangle) => PixelCrop;

                                                                                          method render

                                                                                          render: () => React.JSX.Element;

                                                                                            method renderCropSelection

                                                                                            renderCropSelection: () => React.JSX.Element | undefined;

                                                                                              method resizeCrop

                                                                                              resizeCrop: () => PixelCrop;

                                                                                                method resolveMinDimensions

                                                                                                resolveMinDimensions: (
                                                                                                box: Rectangle,
                                                                                                aspect: number,
                                                                                                minWidth?: number,
                                                                                                minHeight?: number
                                                                                                ) => number[];

                                                                                                  method unbindDocMove

                                                                                                  unbindDocMove: () => void;

                                                                                                    class ReactCrop

                                                                                                    class ReactCrop extends PureComponent<ReactCropProps, ReactCropState> {}

                                                                                                      property componentRef

                                                                                                      componentRef: React.RefObject<HTMLDivElement>;

                                                                                                        property defaultProps

                                                                                                        static defaultProps: {
                                                                                                        ariaLabels: {
                                                                                                        cropArea: string;
                                                                                                        nwDragHandle: string;
                                                                                                        nDragHandle: string;
                                                                                                        neDragHandle: string;
                                                                                                        eDragHandle: string;
                                                                                                        seDragHandle: string;
                                                                                                        sDragHandle: string;
                                                                                                        swDragHandle: string;
                                                                                                        wDragHandle: string;
                                                                                                        };
                                                                                                        };

                                                                                                          property docMoveBound

                                                                                                          docMoveBound: boolean;

                                                                                                            property document

                                                                                                            readonly document: Document;

                                                                                                              property dragStarted

                                                                                                              dragStarted: boolean;

                                                                                                                property evData

                                                                                                                evData: EVData;

                                                                                                                  property initChangeCalled

                                                                                                                  initChangeCalled: boolean;

                                                                                                                    property instanceId

                                                                                                                    instanceId: string;

                                                                                                                      property mediaRef

                                                                                                                      mediaRef: React.RefObject<HTMLDivElement>;

                                                                                                                        property mouseDownOnCrop

                                                                                                                        mouseDownOnCrop: boolean;

                                                                                                                          property nudgeStep

                                                                                                                          static nudgeStep: number;

                                                                                                                            property nudgeStepLarge

                                                                                                                            static nudgeStepLarge: number;

                                                                                                                              property nudgeStepMedium

                                                                                                                              static nudgeStepMedium: number;

                                                                                                                                property onComponentKeyDown

                                                                                                                                onComponentKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;

                                                                                                                                  property onComponentPointerDown

                                                                                                                                  onComponentPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;

                                                                                                                                    property onCropPointerDown

                                                                                                                                    onCropPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;

                                                                                                                                      property onDocPointerDone

                                                                                                                                      onDocPointerDone: (e: PointerEvent) => void;

                                                                                                                                        property onDocPointerMove

                                                                                                                                        onDocPointerMove: (e: PointerEvent) => void;

                                                                                                                                          property onDragFocus

                                                                                                                                          onDragFocus: () => void;

                                                                                                                                            property onHandlerKeyDown

                                                                                                                                            onHandlerKeyDown: (e: React.KeyboardEvent<HTMLDivElement>, ord: Ords) => void;

                                                                                                                                              property resizeObserver

                                                                                                                                              resizeObserver?: ResizeObserver;

                                                                                                                                                property state

                                                                                                                                                state: ReactCropState;

                                                                                                                                                  property xOrds

                                                                                                                                                  static xOrds: string[];

                                                                                                                                                    property xyOrds

                                                                                                                                                    static xyOrds: string[];

                                                                                                                                                      property yOrds

                                                                                                                                                      static yOrds: string[];

                                                                                                                                                        method bindDocMove

                                                                                                                                                        bindDocMove: () => void;

                                                                                                                                                          method componentDidUpdate

                                                                                                                                                          componentDidUpdate: (prevProps: ReactCropProps) => void;

                                                                                                                                                            method componentWillUnmount

                                                                                                                                                            componentWillUnmount: () => void;

                                                                                                                                                              method dragCrop

                                                                                                                                                              dragCrop: () => PixelCrop;

                                                                                                                                                                method getBox

                                                                                                                                                                getBox: () => Rectangle;

                                                                                                                                                                  method getCropStyle

                                                                                                                                                                  getCropStyle: () =>
                                                                                                                                                                  | { top: string; left: string; width: string; height: string }
                                                                                                                                                                  | undefined;

                                                                                                                                                                    method getPointRegion

                                                                                                                                                                    getPointRegion: (
                                                                                                                                                                    box: Rectangle,
                                                                                                                                                                    origOrd: Ords | undefined,
                                                                                                                                                                    minWidth: number,
                                                                                                                                                                    minHeight: number
                                                                                                                                                                    ) => XYOrds;

                                                                                                                                                                      method makePixelCrop

                                                                                                                                                                      makePixelCrop: (box: Rectangle) => PixelCrop;

                                                                                                                                                                        method render

                                                                                                                                                                        render: () => React.JSX.Element;

                                                                                                                                                                          method renderCropSelection

                                                                                                                                                                          renderCropSelection: () => React.JSX.Element | undefined;

                                                                                                                                                                            method resizeCrop

                                                                                                                                                                            resizeCrop: () => PixelCrop;

                                                                                                                                                                              method resolveMinDimensions

                                                                                                                                                                              resolveMinDimensions: (
                                                                                                                                                                              box: Rectangle,
                                                                                                                                                                              aspect: number,
                                                                                                                                                                              minWidth?: number,
                                                                                                                                                                              minHeight?: number
                                                                                                                                                                              ) => number[];

                                                                                                                                                                                method unbindDocMove

                                                                                                                                                                                unbindDocMove: () => void;

                                                                                                                                                                                  Interfaces

                                                                                                                                                                                  interface Crop

                                                                                                                                                                                  interface Crop {}

                                                                                                                                                                                    property height

                                                                                                                                                                                    height: number;

                                                                                                                                                                                      property unit

                                                                                                                                                                                      unit: 'px' | '%';

                                                                                                                                                                                        property width

                                                                                                                                                                                        width: number;

                                                                                                                                                                                          property x

                                                                                                                                                                                          x: number;

                                                                                                                                                                                            property y

                                                                                                                                                                                            y: number;

                                                                                                                                                                                              interface PercentCrop

                                                                                                                                                                                              interface PercentCrop extends Crop {}

                                                                                                                                                                                                property unit

                                                                                                                                                                                                unit: '%';

                                                                                                                                                                                                  interface PixelCrop

                                                                                                                                                                                                  interface PixelCrop extends Crop {}

                                                                                                                                                                                                    property unit

                                                                                                                                                                                                    unit: 'px';

                                                                                                                                                                                                      interface ReactCropProps

                                                                                                                                                                                                      interface ReactCropProps {}

                                                                                                                                                                                                        property ariaLabels

                                                                                                                                                                                                        ariaLabels?: {
                                                                                                                                                                                                        cropArea: string;
                                                                                                                                                                                                        nwDragHandle: string;
                                                                                                                                                                                                        nDragHandle: string;
                                                                                                                                                                                                        neDragHandle: string;
                                                                                                                                                                                                        eDragHandle: string;
                                                                                                                                                                                                        seDragHandle: string;
                                                                                                                                                                                                        sDragHandle: string;
                                                                                                                                                                                                        swDragHandle: string;
                                                                                                                                                                                                        wDragHandle: string;
                                                                                                                                                                                                        };
                                                                                                                                                                                                        • An object of labels to override the built-in English ones

                                                                                                                                                                                                        property aspect

                                                                                                                                                                                                        aspect?: number;
                                                                                                                                                                                                        • The aspect ratio of the crop, e.g. 1 for a square or 16 / 9 for landscape.

                                                                                                                                                                                                        property children

                                                                                                                                                                                                        children?: React.ReactNode;
                                                                                                                                                                                                        • The elements that you want to perform a crop on. For example an image or video.

                                                                                                                                                                                                        property circularCrop

                                                                                                                                                                                                        circularCrop?: boolean;
                                                                                                                                                                                                        • Show the crop area as a circle. If your aspect is not 1 (a square) then the circle will be warped into an oval shape. Defaults to false.

                                                                                                                                                                                                        property className

                                                                                                                                                                                                        className?: string;
                                                                                                                                                                                                        • Classes to pass to the ReactCrop element.

                                                                                                                                                                                                        property crop

                                                                                                                                                                                                        crop?: Crop;
                                                                                                                                                                                                        • Since v10 all crop params are required except for aspect. Omit the entire crop object if you don't want a crop. See README on how to create an aspect crop with a % crop.

                                                                                                                                                                                                        property disabled

                                                                                                                                                                                                        disabled?: boolean;
                                                                                                                                                                                                        • If true then the user cannot resize or draw a new crop. A class of ReactCrop--disabled is also added to the container for user styling.

                                                                                                                                                                                                        property keepSelection

                                                                                                                                                                                                        keepSelection?: boolean;
                                                                                                                                                                                                        • If true is passed then selection can't be disabled if the user clicks outside the selection area.

                                                                                                                                                                                                        property locked

                                                                                                                                                                                                        locked?: boolean;
                                                                                                                                                                                                        • If true then the user cannot create or resize a crop, but can still drag the existing crop around. A class of ReactCrop--locked is also added to the container for user styling.

                                                                                                                                                                                                        property maxHeight

                                                                                                                                                                                                        maxHeight?: number;
                                                                                                                                                                                                        • A maximum crop height, in pixels.

                                                                                                                                                                                                        property maxWidth

                                                                                                                                                                                                        maxWidth?: number;
                                                                                                                                                                                                        • A maximum crop width, in pixels.

                                                                                                                                                                                                        property minHeight

                                                                                                                                                                                                        minHeight?: number;
                                                                                                                                                                                                        • A minimum crop height, in pixels.

                                                                                                                                                                                                        property minWidth

                                                                                                                                                                                                        minWidth?: number;
                                                                                                                                                                                                        • A minimum crop width, in pixels.

                                                                                                                                                                                                        property onChange

                                                                                                                                                                                                        onChange: (crop: PixelCrop, percentageCrop: PercentCrop) => void;
                                                                                                                                                                                                        • A callback which happens for every change of the crop. You should set the crop to state and pass it back into the library via the crop prop.

                                                                                                                                                                                                        property onComplete

                                                                                                                                                                                                        onComplete?: (crop: PixelCrop, percentageCrop: PercentCrop) => void;
                                                                                                                                                                                                        • A callback which happens after a resize, drag, or nudge. Passes the current crop state object in pixels and percent.

                                                                                                                                                                                                        property onDragEnd

                                                                                                                                                                                                        onDragEnd?: (e: PointerEvent) => void;
                                                                                                                                                                                                        • A callback which happens when a user releases the cursor or touch after dragging or resizing.

                                                                                                                                                                                                        property onDragStart

                                                                                                                                                                                                        onDragStart?: (e: PointerEvent) => void;
                                                                                                                                                                                                        • A callback which happens when a user starts dragging or resizing. It is convenient to manipulate elements outside this component.

                                                                                                                                                                                                        property renderSelectionAddon

                                                                                                                                                                                                        renderSelectionAddon?: (state: ReactCropState) => React.ReactNode;
                                                                                                                                                                                                        • Render a custom element in crop selection.

                                                                                                                                                                                                        property ruleOfThirds

                                                                                                                                                                                                        ruleOfThirds?: boolean;
                                                                                                                                                                                                        • Show rule of thirds lines in the cropped area. Defaults to false.

                                                                                                                                                                                                        property style

                                                                                                                                                                                                        style?: React.CSSProperties;
                                                                                                                                                                                                        • Inline styles object to be passed to the ReactCrop element.

                                                                                                                                                                                                        interface ReactCropState

                                                                                                                                                                                                        interface ReactCropState {}

                                                                                                                                                                                                          property cropIsActive

                                                                                                                                                                                                          cropIsActive: boolean;

                                                                                                                                                                                                            property newCropIsBeingDrawn

                                                                                                                                                                                                            newCropIsBeingDrawn: boolean;

                                                                                                                                                                                                              Type Aliases

                                                                                                                                                                                                              type Ords

                                                                                                                                                                                                              type Ords = XOrds | YOrds | XYOrds;

                                                                                                                                                                                                                type XOrds

                                                                                                                                                                                                                type XOrds = 'e' | 'w';

                                                                                                                                                                                                                  type XYOrds

                                                                                                                                                                                                                  type XYOrds = 'nw' | 'ne' | 'se' | 'sw';

                                                                                                                                                                                                                    type YOrds

                                                                                                                                                                                                                    type YOrds = 'n' | 's';

                                                                                                                                                                                                                      Package Files (4)

                                                                                                                                                                                                                      Dependencies (0)

                                                                                                                                                                                                                      No dependencies.

                                                                                                                                                                                                                      Dev Dependencies (14)

                                                                                                                                                                                                                      Peer Dependencies (1)

                                                                                                                                                                                                                      Badge

                                                                                                                                                                                                                      To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                                                                      You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-image-crop.

                                                                                                                                                                                                                      • Markdown
                                                                                                                                                                                                                        [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-image-crop)
                                                                                                                                                                                                                      • HTML
                                                                                                                                                                                                                        <a href="https://www.jsdocs.io/package/react-image-crop"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>