Feature request: Custom Hotspot Children as React Component

[alex254]

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) => (
        <Pannellum.Hotspot
          type="custom"
          pitch={0}
          yaw={index * 2}
          text={product.name}
          handleClick={() => setProduct(product.productHash)}
        >

          <ProductImage src={product.productThumbnail.src} />

        </Pannellum.Hotspot>

      ))}

    </Pannellum>

`

[alex254]

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]

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