rc-image
React Image.
Feature
- Placeholder
- Preview
- Rotate
- Zoom
- Flip
- Fallback
- Multiple Preview
install
Usage
npm install
npm startimport Image from 'rc-image';
export default () => (
<Image src="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.ReactNode, info: { transform: TransformType }) => React.ReactNode | - | Customize image |
| toolbarRender | (originalNode: React.ReactNode, 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
import Image from 'rc-image';
export default () => (
<Image.PreviewGroup>
<Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
<Image src="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.ReactNode, info: { transform: TransformType, current: number }) => React.ReactNode | - | Customize image |
| toolbarRender | (originalNode: React.ReactNode, 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
type TransformAction =
| 'flipY'
| 'flipX'
| 'rotateLeft'
| 'rotateRight'
| 'zoomIn'
| 'zoomOut'
| 'close'
| 'prev'
| 'next'
| 'wheel'
| 'doubleClick'
| 'move'
| 'dragRebound';ToolbarRenderInfoType
{
icons: {
flipYIcon: React.ReactNode;
flipXIcon: React.ReactNode;
rotateLeftIcon: React.ReactNode;
rotateRightIcon: React.ReactNode;
zoomOutIcon: React.ReactNode;
zoomInIcon: React.ReactNode;
};
actions: {
onFlipY: () => void;
onFlipX: () => void;
onRotateLeft: () => void;
onRotateRight: () => void;
onZoomOut: () => void;
onZoomIn: () => 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.