PreviewLink

A link to preview behavior on a specific zone. You can use it to preview a link to an external website, a preview of a video, etc.

import {PreviewLink, PreviewLinkContent, PreviewLinkHovering} from "swash/PreviewLink";
import {IoExpand} from "swash/Icon"

() => (
        <PreviewLink display="inline-block">
            <PreviewLinkContent>
                <img
                    src="https://picsum.photos/100/100"
                    height={100}
                    width={100}
                    alt="Image"
                />
            </PreviewLinkContent>
            <PreviewLinkHovering>
                <IoExpand />
            </PreviewLinkHovering>
        </PreviewLink>
);

The API is composed of 2 components: PreviewLinkContent and PreviewLinkHovering.

PreviewLinkContent

This component is used to wrap the content of the link.

PreviewLinkHovering

This part is visible only when the user hovers the link. You can put an icon or a text in it to indicate that the link is a preview link.