|
|
@@ -1,4 +1,9 @@
|
|
|
-import type { ComponentType, DetailedHTMLProps, ImgHTMLAttributes, JSX } from 'react';
|
|
|
+import type {
|
|
|
+ ComponentType,
|
|
|
+ DetailedHTMLProps,
|
|
|
+ ImgHTMLAttributes,
|
|
|
+ JSX,
|
|
|
+} from 'react';
|
|
|
import { useEffect, useState } from 'react';
|
|
|
import { createPortal } from 'react-dom';
|
|
|
|
|
|
@@ -18,11 +23,12 @@ type FsLightboxProps = {
|
|
|
export const LightBox = (props: Props): JSX.Element => {
|
|
|
const [toggler, setToggler] = useState(false);
|
|
|
// Dynamically import fslightbox-react so it stays out of the SSR bundle
|
|
|
- const [FsLightbox, setFsLightbox] = useState<ComponentType<FsLightboxProps> | null>(null);
|
|
|
+ const [FsLightbox, setFsLightbox] =
|
|
|
+ useState<ComponentType<FsLightboxProps> | null>(null);
|
|
|
const { alt, ...rest } = props;
|
|
|
|
|
|
useEffect(() => {
|
|
|
- import('fslightbox-react').then(m => setFsLightbox(() => m.default));
|
|
|
+ import('fslightbox-react').then((m) => setFsLightbox(() => m.default));
|
|
|
}, []);
|
|
|
|
|
|
return (
|
|
|
@@ -36,16 +42,17 @@ export const LightBox = (props: Props): JSX.Element => {
|
|
|
<img alt={alt} {...rest} />
|
|
|
</button>
|
|
|
|
|
|
- {FsLightbox != null && createPortal(
|
|
|
- <FsLightbox
|
|
|
- toggler={toggler}
|
|
|
- sources={[props.src]}
|
|
|
- alt={alt}
|
|
|
- type="image"
|
|
|
- exitFullscreenOnClose
|
|
|
- />,
|
|
|
- document.body,
|
|
|
- )}
|
|
|
+ {FsLightbox != null &&
|
|
|
+ createPortal(
|
|
|
+ <FsLightbox
|
|
|
+ toggler={toggler}
|
|
|
+ sources={[props.src]}
|
|
|
+ alt={alt}
|
|
|
+ type="image"
|
|
|
+ exitFullscreenOnClose
|
|
|
+ />,
|
|
|
+ document.body,
|
|
|
+ )}
|
|
|
</>
|
|
|
);
|
|
|
};
|