image
image copied to clipboard
Published
20 hours ago •
react-component
react-component
🖼 React Image Component
rc-image
React Image.
Feature
- [x] Placeholder
- [x] Preview
- [x] Rotate
- [x] Zoom
- [x] Fallback
- [x] Multiple Preview
install
Usage
npm install
npm start
const Image = require('rc-image');
ReactDOM.render(
<Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
), document.getElementById('root'));
API
| Name | Type | Default | Description |
|---|---|---|---|
| preview | boolean | { visible: boolean, scaleStep: number, onVisibleChange: function(value, prevValue), getContainer: string | HTMLElement | (() => HTMLElement) | false } | 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 |
Image.PreviewGroup
preview the merged src
const Image = require('rc-image');
ReactDOM.render(
<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>
), document.getElementById('root'));
API
| Name | Type | Default | Description |
|---|---|---|---|
| preview | boolean | { visible: boolean, scaleStep: number, onVisibleChange: function(value, prevValue), getContainer: string | HTMLElement | (() => HTMLElement) | false, countRender?: (current: number, total: number) => string, current: number } |
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' |
Example
http://localhost:8003/examples/
Test Case
npm test
Coverage
npm run coverage
License
rc-image is released under the MIT license.
react-component