@zzwing/react-image NPM

A React Image Component

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)

react image component

@infinitebrahmanuniverse/nolb-_zz @everything-registry/sub-chunk-1082 react-easy-fields

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago