web-image-preview component build with lit
npm i lit-image-preview
<lit-image-preview
visible
showWithAnimation
image="imgToPreview"
></lit-image-preview>
prop | desc |
---|---|
image | img src |
showWithAnimation | animated image to show |
visible | visibility of preview |
Browser | Supports ES2019 & web components |
---|---|
Chrome | >=73 |
Safari | >=12.1 |
Firefox | >=63 |
Edge | >=79 |
To supprot legacy browser, you can replace this with a rule to explicitly include folders to compile:
include: [
'node_modules/lit-image-preview',
'node_modules/lit/**',
'node_modules/lit-element/**',
'node_modules/lit-html/**'
]
And also need to import polyfill: @webcomponents/webcomponentsjs
and
lit/polyfill-support.js
import "@webcomponents/webcomponentsjs";
import "lit/polyfill-support.js";
<lit-image-preview
visible
showWithAnimation
image="https://zy-blog-1301055733.cos.ap-shanghai.myqcloud.com/timing%20level%201.png"
></lit-image-preview>;
For further understanding, please visit:https://lit.dev/docs/tools/requirements/
If you want to set a event for image preview modal hidden, you need to listen custom event lit-image-preview-mc
. Here is code demo for React usage
import { useRef, useEffect } from "react"
import "lit/polyfill-support.js"
import "@webcomponents/webcomponentsjs"
import "lit-image-preview"
const ImagePreview = ({
imgToPreview,
onModalClick,
}: {
imgToPreview: string
onModalClick: () => void
}) => {
const previewModal = useRef<HTMLDivElement>(null)
useEffect(() => {
if (previewModal.current) {
previewModal.current.addEventListener(
"lit-image-preview-mc",
(e: CustomEvent<{ visible: boolean }>) => {
if (e.detail.visible) onModalClick()
},
)
}
}, [onModalClick])
return (
<div ref={previewModal}>
<lit-image-preview
visible
showWithAnimation
image={imgToPreview}
></lit-image-preview>
</div>
)
}
And for fixing typescript eslint warning:
import type ImageModal from "lit-image-preview";
declare global {
// eslint-disable-next-line no-unused-vars
namespace JSX {
// eslint-disable-next-line no-unused-vars
interface IntrinsicElements {
"lit-image-preview":
| Pick<ImageModal, "image" | "showWithAnimation" | "visible">
| HTMLElement;
}
}
}
const myCustomEventType: "lit-image-preview-mc" = "lit-image-preview-mc";
// "CustomEvent" comes from 'lib.dom.d.ts' (tsconfig.json)
class MyCustomEvent extends CustomEvent<MyCustomEventDetail> {
constructor(detail: MyCustomEventDetail) {
super(myCustomEventType, { detail });
}
}
interface MyCustomEventDetail {
visible: boolean;
}
declare global {
// eslint-disable-next-line no-unused-vars
interface HTMLElementEventMap {
[myCustomEventType]: MyCustomEvent;
}
}