react-image-crop

react-image-crop

Version 11.1.2
Published 1 month ago
115 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 cropToCanvas

cropToCanvas: (
    image: HTMLImageElement,
    canvas: HTMLCanvasElement,
    crop: PixelCrop,
    scale?: number,
    rotate?: number
) => Promise<void>;

function cropToImg

cropToImg: (
    image: HTMLImageElement,
    crop: PixelCrop,
    scale?: number,
    rotate?: number
) => Promise<string>;

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: default_2.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: default_2.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: default_2.KeyboardEvent<HTMLDivElement>) => void;

property onComponentPointerDown

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

property onCropPointerDown

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

property onDocPointerDone

onDocPointerDone: (e: PointerEvent) => void;

property onDocPointerMove

onDocPointerMove: (e: PointerEvent) => void;

property onDragFocus

onDragFocus: () => void;

property onHandlerKeyDown

onHandlerKeyDown: (
    e: default_2.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: () => default_2.JSX.Element;

method renderCropSelection

renderCropSelection: () => default_2.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: default_2.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: default_2.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: default_2.KeyboardEvent<HTMLDivElement>) => void;

property onComponentPointerDown

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

property onCropPointerDown

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

property onDocPointerDone

onDocPointerDone: (e: PointerEvent) => void;

property onDocPointerMove

onDocPointerMove: (e: PointerEvent) => void;

property onDragFocus

onDragFocus: () => void;

property onHandlerKeyDown

onHandlerKeyDown: (
    e: default_2.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: () => default_2.JSX.Element;

method renderCropSelection

renderCropSelection: () => default_2.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?: default_2.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) => default_2.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?: default_2.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 (1)

dist/index.d.ts

Dependencies (0)

No dependencies.

Dev Dependencies (16)

Peer Dependencies (1)

react

Badge

To add a badge like this oneto 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>

Updated 1 month ago.
Package analyzed in 4345 ms.
Missing or incorrect documentation? Open an issue for this package.