react-image-crop
- Version 11.0.6
- Published
- 111 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
Functions
Classes
Component
- bindDocMove()
- componentDidUpdate()
- componentRef
- componentWillUnmount()
- defaultProps
- docMoveBound
- document
- dragCrop()
- dragStarted
- evData
- getBox()
- getCropStyle()
- getPointRegion()
- initChangeCalled
- instanceId
- makePixelCrop()
- mediaRef
- mouseDownOnCrop
- nudgeStep
- nudgeStepLarge
- nudgeStepMedium
- onComponentKeyDown
- onComponentPointerDown
- onCropPointerDown
- onDocPointerDone
- onDocPointerMove
- onDragFocus
- onHandlerKeyDown
- render()
- renderCropSelection()
- resizeCrop()
- resizeObserver
- resolveMinDimensions()
- state
- unbindDocMove()
- xOrds
- xyOrds
- yOrds
ReactCrop
- bindDocMove()
- componentDidUpdate()
- componentRef
- componentWillUnmount()
- defaultProps
- docMoveBound
- document
- dragCrop()
- dragStarted
- evData
- getBox()
- getCropStyle()
- getPointRegion()
- initChangeCalled
- instanceId
- makePixelCrop()
- mediaRef
- mouseDownOnCrop
- nudgeStep
- nudgeStepLarge
- nudgeStepMedium
- onComponentKeyDown
- onComponentPointerDown
- onCropPointerDown
- onDocPointerDone
- onDocPointerMove
- onDragFocus
- onHandlerKeyDown
- render()
- renderCropSelection()
- resizeCrop()
- resizeObserver
- resolveMinDimensions()
- state
- unbindDocMove()
- xOrds
- xyOrds
- yOrds
Interfaces
Type Aliases
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 {}
interface PercentCrop
interface PercentCrop extends Crop {}
property unit
unit: '%';
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 or16 / 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
Package Files (4)
Dependencies (0)
No dependencies.
Dev Dependencies (14)
Peer Dependencies (1)
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 .
Package analyzed in 4608 ms. - Missing or incorrect documentation? Open an issue for this package.