Skip to main content

Mouse events

The <AnnotationViewer/> support mouse events.#

You can use the onShapeMouseEnter, onShapeMouseLeave and onShapeClick props to bind event handlers to the <canvas/> shapes.

const onShapeMouseEnter = (shape: AnnotationShape) => {  console.log('On mouse enter', shape)}const onShapeMouseLeave = (shape: AnnotationShape) => {  console.log('On mouse leave', shape)}const onShapeClick = (shape: AnnotationShape) => {  console.log('On mouse click', shape)}return (  <AnnotationViewer    data={annotationData}    onShapeMouseLeave={onShapeMouseLeave}    onShapeMouseEnter={onShapeMouseEnter}    onShapeClick={onShapeClick}  />)

Full example#