ItemPosition

The Item Position component can be used to consistently position all of an item's interactions and preview across all design layers.

name	type	required	comment
children	ReactNode | ReactNode[]	yes
dimensions	Dimensions	yes	Dimensions of the item, in pixels.
position	Coordinates	yes	Position of the image, in pixels.
rotation	number	yes	Rotation of the image in degrees.
zIndex	number	yes
ariaLabel	string	no
className	string	no
role	AriaRole	no
style	CSSProperties	no

Note that in the demo below, the same position object is passed to both the item's preview and outline.

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>
    );
}