Skip to main content

Image

import Image from "@arclockproject/common/components/Image";

For examples and live demos, see the Image guide.

Image​

Component · default export

Shows an image, video or PSD file inside a Movable, so it can be dragged and zoomed. Videos play muted and on a loop.

PSD support is opt-in through psdRenderer, so PSDViewer and its dependencies are only bundled when you need them.

Props

  • src (string) — URL of the file.
  • alt? (string) — Alt text. Only used for images.
  • refPropImage? (React.RefObject<HTMLImageElement>) — Ref to the <img> element, when rendering an image. Populated on mount/rerender.
  • refPropVideo? (React.RefObject<HTMLVideoElement>) — Ref to the <video> element, when rendering a video. Populated on mount/rerender.
  • renderer ("video" | "psd" | "image" | "auto") — How to render src. "auto" picks from the lowercase file extension: mp4, mov and mkv are videos, anything else is an image. PSD files need ".psd".
  • psdRenderer? ({ isLazy: false; component: validPSDViewer } | { isLazy: true; component: LazyExoticComponent<validPSDViewer> }) — Component used when renderer is "psd". Pass isLazy: true with a React.lazy component to load it only when needed.
  • autoPlay? (boolean) — Start playing videos right away.
  • controls? (boolean) — Show video controls.
  • onLoad? (ReactEventHandler<HTMLDivElement | HTMLVideoElement>) — Called when the file has loaded.
  • onError? (ReactEventHandler<HTMLDivElement | HTMLVideoElement>) — Called when the file fails to load.
  • styleRoot? (React.CSSProperties) — Style of the outer Movable container.
  • styleImage? (React.CSSProperties) — Style of the image, video or PSD element.
  • enableMovement (boolean) — Allow dragging and zooming.

Example

<Image src="/photos/cat.webp" renderer="auto" enableMovement />

validPSDViewer​

Type · not exported, used by the API above

type validPSDViewer = (props: HTMLAttributes<HTMLDivElement> & {
    src: string;
}) => JSX.Element

A component that can render a PSD file, such as PSDViewer.