Nuclear Powered Mushroom

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

    5.8.0 • Public • Published

    rc-image

    React Image.

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

    Feature

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

    install

    rc-image

    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.

    Install

    npm i rc-image

    DownloadsWeekly Downloads

    582,698

    Version

    5.8.0

    License

    MIT

    Unpacked Size

    91.5 kB

    Total Files

    28

    Last publish

    Collaborators

    • afc163
    • zombiej
    • ycjcl868
    • dahong