-
-
Notifications
You must be signed in to change notification settings - Fork 91
/
image-zoom.tsx
40 lines (36 loc) · 939 Bytes
/
image-zoom.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
'use client';
import Image, { type ImageProps } from 'next/image';
import { type ImgHTMLAttributes } from 'react';
import Zoom from 'react-medium-image-zoom';
import { defaultImageSizes } from '@/utils/shared';
import '../../dist/image-zoom.css';
export type ImageZoomProps = ImageProps & {
/**
* Image props when zoom in
*/
zoomInProps?: ImgHTMLAttributes<HTMLImageElement>;
};
function getImageSrc(src: ImageProps['src']): string {
if (typeof src === 'string') return src;
if ('default' in src) return src.default.src;
return src.src;
}
export function ImageZoom({
zoomInProps,
children,
...props
}: ImageZoomProps): React.ReactElement {
return (
<Zoom
zoomMargin={20}
wrapElement="span"
zoomImg={{
src: getImageSrc(props.src),
sizes: undefined,
...zoomInProps,
}}
>
{children ?? <Image sizes={defaultImageSizes} {...props} />}
</Zoom>
);
}