River-rc-image NPM

rc-image

React Image.

Feature

Placeholder
Preview
Rotate
Zoom
Fallback
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,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,onVisibleChange:function(value, prevValue),getContainer: string \| HTMLElement \| (() => HTMLElement) \| false }	true	Whether to show preview
current	number	0	If Preview the show img index

Example

http://localhost:8003/examples/

Test Case

npm test

Coverage

npm run coverage

License

rc-image is released under the MIT license.

react react-component react-image image

@babel/runtime classnames file-saver qs rc-dialog rc-util

@infinitebrahmanuniverse/nolb-riv @everything-registry/sub-chunk-2670

7.0.4

2 years ago

7.0.2

2 years ago