Skip to content

README.md

Latest commit

 

History

History
60 lines (46 loc) · 1.23 KB

README.md

File metadata and controls

60 lines (46 loc) · 1.23 KB

react-image-pinner

react-image-pinner provides React components for placing and rendering pins/markers on an image.

Install

npm install react-image-pinner
bun install react-image-pinner

Usage

There are two ways of using the library.

  • Simpler
import { useState } from "react";
import { ImagePinner, Pin } from "react-image-pinner";

export function ProductImage() {
  const [pins, setPins] = useState<Pin[]>([{ top: 32, left: 45 }]);

  return (
    <ImagePinner
      src="/map.jpg"
      alt="Map photo"
      pins={pins}
      onAddPin={(pin) => setPins((prev) => [...prev, pin])}
      imageClassName="map-image"
    />
  );
}
  • More Customizable
<ImagePinner.Root
  pins={pins}
  onAddPin={(pin) => setPins((prev) => [...prev, pin])}
>
  <ImagePinner.Image src="/map.jpg" alt="Map photo" className="map-image" />
  <ImagePinner.Overlay>
    <ImagePinner.Items
      render={({ itemNumber }) => (
        <ImagePinner.DefaultPinner itemNumber={itemNumber} />
      )}
    />
  </ImagePinner.Overlay>
</ImagePinner.Root>

Credits

Inspired by react-image-marker. I made this package after running into some limitations for my use case.