react-image-pinner

React components for placing and rendering pins or markers on images.

Loading interactive demo…

<ImagePinner.Root
  pins={pins}
  onAddPin={(pin) => {
    setPins((prev) => [...prev, pin]);
  }}
>
  <ImagePinner.Image src="/photo.jpg" alt="" />
  <ImagePinner.Overlay>
    <ImagePinner.Items
      render={({ itemNumber }) => {
        return (
          <ImagePinner.DefaultPinner itemNumber={itemNumber} />
        );
      }}
    />
  </ImagePinner.Overlay>
</ImagePinner.Root>