rc-image

React Image.

Feature

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

install

Usage

1npm install
2npm start

1import Image from 'rc-image';
2
3export default () => (
4  <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
5);

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

1import Image from 'rc-image';
2
3export default () => (
4  <Image.PreviewGroup>
5    <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
6    <Image src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ" />
7  </Image.PreviewGroup>
8);

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

1{
2  x: number;
3  y: number;
4  rotate: number;
5  scale: number;
6  flipX: boolean;
7  flipY: boolean;
8}

TransformAction

1type TransformAction =
2  | 'flipY'
3  | 'flipX'
4  | 'rotateLeft'
5  | 'rotateRight'
6  | 'zoomIn'
7  | 'zoomOut'
8  | 'close'
9  | 'prev'
10  | 'next'
11  | 'wheel'
12  | 'doubleClick'
13  | 'move'
14  | 'dragRebound';

ToolbarRenderInfoType

1{
2  icons: {
3    prevIcon?: React.ReactNode;
4    nextIcon?: React.ReactNode;
5    flipYIcon: React.ReactNode;
6    flipXIcon: React.ReactNode;
7    rotateLeftIcon: React.ReactNode;
8    rotateRightIcon: React.ReactNode;
9    zoomOutIcon: React.ReactNode;
10    zoomInIcon: React.ReactNode;
11  };
12  actions: {
13    onActive?: (offset: number) => void;
14    onFlipY: () => void;
15    onFlipX: () => void;
16    onRotateLeft: () => void;
17    onRotateRight: () => void;
18    onZoomOut: () => void;
19    onZoomIn: () => void;
20    onClose: () => void;
21    onReset: () => void;
22  };
23  transform: {
24    x: number;
25    y: number;
26    rotate: number;
27    scale: number;
28    flipX: boolean;
29    flipY: boolean;
30  },
31  current: number;
32  total: number;
33}

Example

http://localhost:8003/examples/

Test Case

npm test

Coverage

npm run coverage

License

rc-image is released under the MIT license.