rc-image
TypeScript icon, indicating that this package has built-in type declarations

7.11.0 • Public • Published

rc-image

React Image.

NPM version npm download build status Codecov bundle size dumi

Feature

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

install

rc-image

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.

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
7.11.0582,557latest

Version History

VersionDownloads (Last 7 Days)Published
7.11.0582,557
7.10.0261
7.9.0165,376
7.8.16,082
7.8.01,444
7.7.11
7.7.05
7.6.090,163
7.5.160,911
7.5.0146
7.4.02
7.3.225,827
7.3.16,303
7.3.01
7.2.08,421
7.1.312,968
7.1.21,444
7.1.12
7.1.05
7.0.014,953
7.0.0-21,615
7.0.0-01
6.1.0194
6.0.02
5.18.1465
5.18.03
5.17.114,134
5.16.015,435
5.15.29,862
5.15.16
5.14.05
5.13.0233,809
5.12.25,911
5.12.18,183
5.12.01,930
5.11.017
5.10.22
5.10.13
5.10.04
5.9.09,267
5.8.03
5.7.142,476
5.6.422,547
5.6.346
5.7.011,900
5.6.28,151
5.6.1284
5.6.076
5.5.072
5.4.05
5.3.025
5.2.549,903
5.2.46,826
5.2.3709
5.2.2193
5.2.1118
5.2.05
5.1.4690
5.1.32
5.1.23
5.1.12
5.0.223,863
5.0.12
5.1.04
5.0.01
5.0.0-beta.31
5.0.0-beta.21
5.0.0-beta.11
4.6.031
4.5.01,019
4.4.01
4.3.21
4.3.13
4.3.02
4.2.05,779
4.1.12
4.1.02
4.0.11,438
4.0.03
3.2.22,407
3.2.11
3.2.02
3.1.05
3.0.66,010
3.0.55
3.0.439
3.0.3366
3.0.288
3.0.12
3.0.02
2.0.02

Package Sidebar

Install

npm i rc-image

Weekly Downloads

1,203,095

Version

7.11.0

License

MIT

Unpacked Size

159 kB

Total Files

72

Last publish

Collaborators

  • afc163
  • zombiej
  • ycjcl868
  • dahong
  • madccc