Giter Club home page Giter Club logo

ggac-image's Introduction

rc-image

React Image.

NPM version npm download build status Codecov bundle size dumi

Feature

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

install

rc-image

Usage

npm install
npm start
import Image from 'rc-image';

export default () => (
  <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
);

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

PreviewType

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

Image.PreviewGroup

preview the merged src

import Image from 'rc-image';

export default () => (
  <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>
);

API

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

PreviewGroupType

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

TransformType

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

TransformAction

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

ToolbarRenderInfoType

{
  icons: {
    flipYIcon: React.ReactNode;
    flipXIcon: React.ReactNode;
    rotateLeftIcon: React.ReactNode;
    rotateRightIcon: React.ReactNode;
    zoomOutIcon: React.ReactNode;
    zoomInIcon: React.ReactNode;
  };
  actions: {
    onFlipY: () => void;
    onFlipX: () => void;
    onRotateLeft: () => void;
    onRotateRight: () => void;
    onZoomOut: () => void;
    onZoomIn: () => 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.

ggac-image's People

Contributors

zombiej avatar afc163 avatar shaodahong avatar linxianxi avatar ycjcl868 avatar madccc avatar kiner-tang avatar dependabot[bot] avatar jarvisart avatar dependabot-preview[bot] avatar xrkffgg avatar u3u avatar imgbot[bot] avatar huangkairan avatar hengkx avatar zpc7 avatar heiyu4585 avatar yoghurtxu avatar xz8la8 avatar xch1029 avatar wangjunjia avatar eng-cc avatar nuintun avatar li-jia-nan avatar jueinin avatar simonwong avatar amiralitaheri avatar rfreling avatar kkaaddff avatar omrigm avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.