5.7.1 • Published 2 years ago

dw-neit-rc-image v5.7.1

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

dw-neit-rc-image

React Image.

NPM version dumi CircleCI status Test coverage Dependencies DevDependencies npm download bundle size

Feature

  • Placeholder
  • Preview
  • Rotate
  • Zoom
  • Fallback
  • Multiple Preview

install

dw-neit-rc-image

Usage

npm install
npm start
const Image = require('dw-neit-rc-image');

ReactDOM.render(
  <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
), document.getElementById('root'));

API

NameTypeDefaultDescription
previewboolean | { visible: boolean, onVisibleChange: function(value, prevValue), getContainer: string | HTMLElement | (() => HTMLElement) | false }trueWhether to show preview
prefixClsstringdw-neit-rc-imageClassname prefix
placeholderboolean | ReactElement-if true will set default placeholder or use ReactElement set customize placeholder
fallbackstring-Load failed src
previewPrefixClsstringdw-neit-rc-image-previewPreview classname prefix
onError(event: Event) => void-Load failed callback

Image.PreviewGroup

preview the merged src

const Image = require('dw-neit-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

NameTypeDefaultDescription
previewboolean | { visible: boolean, onVisibleChange: function(value, prevValue), getContainer: string | HTMLElement | (() => HTMLElement) | false, countRender?: (current: number, total: number) => string, current: number }trueWhether to show preview, current: If Preview the show img index, default 0
previewPrefixClsstringdw-neit-rc-image-previewPreview 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

dw-neit-rc-image is released under the MIT license.

reactreact-componentreact-imageimage
@babel/runtimeclassnamesdw-neit-rc-dialogdw-neit-rc-util
@infinitebrahmanuniverse/nolb-dw@everything-registry/sub-chunk-1539dw-neit-antd
5.7.1

2 years ago