rc-image

React Image.

Feature

• Placeholder
• Preview
• Rotate
• Zoom
• Flip
• Fallback
• Multiple Preview

install

Usage

npm install
npm start

importImagefrom'rc-image';exportdefault()=>(<Imagesrc="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/>);

API

Name	Type	Default	Description
preview	boolean | PreviewType	true	Whether to show preview
prefixCls	string	rc-image	Classname prefix
placeholder	boolean | ReactElement	-	if true will set default placeholder or use ReactElement set customize placeholder
fallback	string	-	Load failed src
previewPrefixCls	string	rc-image-preview	Preview classname prefix
onError	(event: Event) => void	-	Load failed callback

PreviewType

Name	Type	Default	Description
visible	boolean	-	Whether the preview is open or not
closeIcon	React.ReactNode	-	Custom close icon
src	string	-	Customize preview src
movable	boolean	true	Enable drag
scaleStep	number	0.5	The number to which the scale is increased or decreased
minScale	number	1	Min scale
maxScale	number	50	Max scale
forceRender	boolean	-	Force render preview
getContainer	string | HTMLElement | (() => HTMLElement) | false	document.body	Return the mount node for preview
imageRender	(originalNode: React.ReactElement, info: { transform: TransformType }) => React.ReactNode	-	Customize image
toolbarRender	(originalNode: React.ReactElement, info: Omit<ToolbarRenderInfoType, 'current' | 'total'>) => React.ReactNode	-	Customize toolbar
onVisibleChange	(visible: boolean, prevVisible: boolean) => void	-	Callback when visible is changed
onTransform	{ transform: TransformType, action: TransformAction }	-	Callback when transform is changed

Image.PreviewGroup

preview the merged src

importImagefrom'rc-image';exportdefault()=>(<Image.PreviewGroup><Imagesrc="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/><Imagesrc="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ"/></Image.PreviewGroup>);

API

Name	Type	Default	Description
preview	boolean | PreviewGroupType	true	Whether to show preview, current: If Preview the show img index, default 0
previewPrefixCls	string	rc-image-preview	Preview classname prefix
icons	{ [iconKey]?: ReactNode }	-	Icons in the top operation bar, iconKey: 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'left' | 'right'
fallback	string	-	Load failed src
items	(string | { src: string, alt: string, crossOrigin: string, ... })[]	-	preview group

PreviewGroupType

Name	Type	Default	Description
visible	boolean	-	Whether the preview is open or not
movable	boolean	true	Enable drag
current	number	-	Current index
closeIcon	React.ReactNode	-	Custom close icon
scaleStep	number	0.5	The number to which the scale is increased or decreased
minScale	number	1	Min scale
maxScale	number	50	Max scale
forceRender	boolean	-	Force render preview
getContainer	string | HTMLElement | (() => HTMLElement) | false	document.body	Return the mount node for preview
countRender	(current: number, total: number) => ReactNode	-	Customize count
imageRender	(originalNode: React.ReactElement, info: { transform: TransformType, current: number }) => React.ReactNode	-	Customize image
toolbarRender	(originalNode: React.ReactElement, info: ToolbarRenderInfoType) => React.ReactNode	-	Customize toolbar
onVisibleChange	(visible: boolean, prevVisible: boolean, current: number) => void	-	Callback when visible is changed
onTransform	{ transform: TransformType, action: TransformAction }	-	Callback when transform is changed

TransformType

{
x: number;
y: number;
rotate: number;
scale: number;
flipX: boolean;
flipY: boolean;}

TransformAction

typeTransformAction=|'flipY'|'flipX'|'rotateLeft'|'rotateRight'|'zoomIn'|'zoomOut'|'close'|'prev'|'next'|'wheel'|'doubleClick'|'move'|'dragRebound';

ToolbarRenderInfoType

{
icons: {prevIcon?: React.ReactNode;
nextIcon?: React.ReactNode;
flipYIcon: React.ReactNode;
flipXIcon: React.ReactNode;
rotateLeftIcon: React.ReactNode;
rotateRightIcon: React.ReactNode;
zoomOutIcon: React.ReactNode;
zoomInIcon: React.ReactNode;};
actions: {onActive?: (offset: number)=>void;onFlipY: ()=>void;onFlipX: ()=>void;onRotateLeft: ()=>void;onRotateRight: ()=>void;onZoomOut: ()=>void;onZoomIn: ()=>void;onClose: ()=>void;onReset: ()=>void;};transform: {x: number;y: number;rotate: number;scale: number;flipX: boolean;flipY: boolean;},current: number;
total: number;}

Example

http://localhost:8003/examples/

Test Case

npm test

Coverage

npm run coverage

License

rc-image is released under the MIT license.