rc-image

React Image.

Feature

• [x] Placeholder
• [x] Preview
• [x] Rotate
• [x] Zoom
• [x] Flip
• [x] Fallback
• [x] Multiple Preview

install

Usage

npm install
npm start

import 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.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

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.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

type TransformAction =
  | '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.