rc-image

React Image.

[![NPM version][npm-image]][npm-url]
[![npm download][download-image]][download-url]
[![build status][github-actions-image]][github-actions-url]
[![Codecov][codecov-image]][codecov-url]
[![bundle size][bundlephobia-image]][bundlephobia-url]
[![dumi][dumi-image]][dumi-url]

[npm-image]: http://img.shields.io/npm/v/rc-image.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-image
[github-actions-image]: https://github.com/react-component/image/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/image/actions
[travis-image]: https://img.shields.io/travis/react-component/image/master?style=flat-square
[travis-url]: https://travis-ci.org/react-component/image
[circleci-image]: https://img.shields.io/circleci/build/github/react-component/image/master?style=flat-square
[circleci-url]: https://circleci.com/gh/react-component/image
[coveralls-image]: https://img.shields.io/coveralls/react-component/image.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/image?branch=master
[codecov-image]: https://img.shields.io/codecov/c/gh/react-component/image?style=flat-square
[codecov-url]: https://codecov.io/gh/react-component/image
[david-url]: https://david-dm.org/react-component/image
[david-image]: https://david-dm.org/react-component/image/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/image?type=dev
[david-dev-image]: https://david-dm.org/react-component/image/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/rc-image.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-image
[bundlephobia-url]: https://bundlephobia.com/result?p=rc-image
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-image
[dumi-url]: https://github.com/umijs/dumi
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square

Feature

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

install


Usage

``bash
npm install
npm start
`

`js
import Image from '@rc-component/image';

export default () => (

);
`

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 |

$3

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| open | 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 |
| actionsRender | (originalNode: React.ReactElement, info: Omit<ToolbarRenderInfoType, 'current' \| 'total'>) => React.ReactNode | - | Customize toolbar |
| onOpenChange | (open: boolean, prevVisible: boolean) => void | - | Callback when open is changed |
| onTransform | { transform: TransformType, action: TransformAction } | - | Callback when transform is changed |

Image.PreviewGroup

preview the merged src

`js
import Image from '@rc-component/image';

export default () => (




);
`

$3

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

$3

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| open | 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 |
| actionsRender | (originalNode: React.ReactElement, info: ToolbarRenderInfoType) => React.ReactNode | - | Customize toolbar |
| onOpenChange | (open: boolean, prevVisible: boolean, current: number) => void | - | Callback when open is changed |
| onTransform | { transform: TransformType, action: TransformAction } | - | Callback when transform is changed |

$3

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

$3

`typescript
type TransformAction =
| 'flipY'
| 'flipX'
| 'rotateLeft'
| 'rotateRight'
| 'zoomIn'
| 'zoomOut'
| 'close'
| 'prev'
| 'next'
| 'wheel'
| 'doubleClick'
| 'move'
| 'dragRebound';
`

$3

`typescript
{
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.

🤝 Contributing