Skip to content

zWingz/react-image

Repository files navigation

A React Image Component

CircleCI codecov

DEMO

Edit v3r46pjql0

Image

  • Auto show the loading or error status of img
  • Can be previewed by Component Preview
  • Group by props group
  • Loadable by used IntersectionObserver
Props Desc Type Default
style -- Object
className -- String
width -- Number, String 100
height -- Number, String initial
src -- String
onClick -- Function
mask mask style when img hover Boolean true
group groupId, used to preview image in same group String default
objectFit img object-fit style String cover
imgProps img props Object
preview can be previewed Boolean true
onDelete delete icon callback Function
onError img onerror callback Function
onLoad img onload callback Function

Example

<Image src='1.jpg'/>
<Image src='1.jpg' style={{margin: '10px'}}/>
<Image src='1.jpg' width='120' height='120'/>
<Image src='1.jpg' objectFit='contains'/>
<Image src='1.jpg' imgProps={{alt: 'test', className: 'my-img-class'}}/>
<Image src='1.jpg' group='my-img-group-1'/> // PreviewApi/preview('1.jpg', [ /* group-img-list */ ])

PreviewApi

Func Desc Params
preview preview a image image: imgSrc or image index of list, list:Array: Images List
show open the previewer
hide close the previewer
destroy destroy the ins

Demo

preview a single image

PreviewApi.preview('1.jpg')

preivew an image in list

const list = ['1.jpg', '2.jpg', '3.jpg']
// use index
PreviewApi.preview(2, list)
// or use src
PreviewApi.preview('2.jpg', list)