setHover(true)}\n onMouseLeave={() => setHover(false)}\n style={styles.galleryItem({ margin: props.margin })}\n >\n
\n \n
\n\n {!!item.tags && (\n
\n {item.tags.map((tag, index) => (\n
\n \n {tag.value}\n \n
\n ))}\n
\n )}\n\n {!!item.customOverlay && (\n
\n {item.customOverlay}\n
\n )}\n\n
\n\n
\n {ThumbnailImageComponent ? (\n
\n ) : (\n
![]()
\n )}\n
\n {item.thumbnailCaption && (\n
\n {item.thumbnailCaption}\n
\n )}\n
\n );\n};\n\nImage.defaultProps = {\n isSelectable: true,\n};\n","import { useRef, useCallback, useEffect, CSSProperties } from \"react\";\n\nconst objectStyles: CSSProperties = {\n position: \"absolute\",\n top: 0,\n left: 0,\n height: \"100%\",\n width: \"100%\",\n pointerEvents: \"none\",\n zIndex: -1,\n opacity: 0,\n};\n\n// based on https://stackblitz.com/edit/react-element-resize-listener?file=ElementResizeListener.tsx\nexport const ResizeListener = ({\n onResize,\n}: {\n onResize: () => void;\n}): JSX.Element => {\n const objectRef = useRef(null);\n const onResizeRef = useRef(onResize);\n\n onResizeRef.current = onResize;\n\n const _onResize = useCallback(() => {\n onResizeRef.current();\n }, []);\n\n const handleLoad = useCallback(() => {\n const obj = objectRef.current;\n if (obj && obj.contentDocument && obj.contentDocument.defaultView) {\n obj.contentDocument.defaultView.addEventListener(\"resize\", _onResize);\n }\n }, []);\n\n useEffect(() => {\n return () => {\n const obj = objectRef.current;\n if (obj && obj.contentDocument && obj.contentDocument.defaultView) {\n obj.contentDocument.defaultView.removeEventListener(\n \"resize\",\n _onResize\n );\n }\n };\n }, []);\n\n return (\n