zWingz/react-image

a react component

A React Image Component

DEMO

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)