farminf / pannellum-react

React Component for Pannellum (open source panorama viewer for the web)
MIT License
112 stars 81 forks source link

Feature request: Custom Hotspot Children as React Component #87

Closed alex254 closed 2 years ago

alex254 commented 2 years ago

Hi,

Thanks for the great work porting the library. However I've been trying to figure out how to implement custom hotspot without forking the library but is unclear to me. Your documentation, nor your example unfortunately shows how to implement a custom hotspot.

I am using a bit of my own code to display what I would like to achieve, take the product thumbnail image pass it as children to the pannellum hotspot. Or as a parameter. ProductImage is a styled-component:

`

{products?.value && products?.value?.map((product, index) => ( setProduct(product.productHash)} > ))}

`

alex254 commented 2 years ago

oke I found a solution using tooltip for anyone interested. But still I feel could be more versatile of you could pass a react component as a child.

{products?.value && products?.value?.map((product, index) => ( <Pannellum.Hotspot type="custom" pitch={0} yaw={index * 10} text={product.name} tooltip={hotspotTooltip} tooltipArg={product.productThumbnail.src} handleClick={() => setProduct(product.productHash)} /> ))}

and define seperate function:

const hotspotTooltip = (hotSpotDiv: any, args: any) => { const imageDiv = document.createElement("img"); imageDiv.setAttribute("width", "80"); imageDiv.setAttribute("height", "80"); imageDiv.setAttribute("src", args); hotSpotDiv.appendChild(imageDiv); };

farminf commented 2 years ago

thanks yeah you can do it, I don't think that I change this way for now since there's gonna be some breaking changes