ItemPreview

The Item Preview component displays an item's image preview via URL.

name	type	required	comment
src	string	yes	URL to image
alt	string	no	alt text te be show for accessibility purposes
ariaLabel	string	no
className	string	no
onImageLoad	() => void	no
previewBox	PreviewBox	no	Box within the image to show. Leave undefined if the entire image should be shown.
role	AriaRole	no
show	boolean	no	Optionally hide the image, in case some other temporary preview needs to be shown instead
style	CSSProperties	no

Result

Loading...

Live Editor

function ItemPositionPreviewOutlineDemo() { const [selected, setSelected] = useState(false); const position = { position: { x: 10, y: 10 }, dimensions: { width: 200, height: 200 }, rotation: 0, zIndex: 1, }; return ( <div> <div> <input type="checkbox" id="selected-box" onChange={(ev) => setSelected(ev.target.checked)} /> <label htmlFor="selected-box">Select Item</label> </div> <DesignLayer style={{ position: 'relative', height: 300 }}> {/* Note that in a real design experience, the item preview and item outline should be in a different design layer */} <ItemPosition {...position}> <ItemPreview src="https://placebear.com/360/360" /> </ItemPosition> <ItemPosition {...position}> <ItemOutline selected={selected} /> </ItemPosition> </DesignLayer> </div> ); }

function ItemPositionPreviewOutlineDemo() {
    const [selected, setSelected] = useState(false);
    const position = {
        position: { x: 10, y: 10 },
        dimensions: { width: 200, height: 200 },
        rotation: 0,
        zIndex: 1,
    };
    return (
        <div>
            <div>
                <input type="checkbox" id="selected-box" onChange={(ev) => setSelected(ev.target.checked)} />
                <label htmlFor="selected-box">Select Item</label>
            </div>
            <DesignLayer style={{ position: 'relative', height: 300 }}>
                {/* Note that in a real design experience, the item preview and item outline should be in a different design layer */}
                <ItemPosition {...position}>
                    <ItemPreview src="https://placebear.com/360/360" />
                </ItemPosition>
                <ItemPosition {...position}>
                    <ItemOutline selected={selected} />
                </ItemPosition>
            </DesignLayer>
        </div>
    );
}