TypeScript typings

[urish]

First of all, thanks for this awesome library!

I'm using it for the electronic diagram viewer in my Arduino simulator project, and it works like a charm :-)

I'm working with TypeScript, so I created a simple type definition file for the library. I created it manually based on the documentation in the README, so it may not be completely accurate, but it does the trick for me.

I'm sharing it below for anyone who might need to use the library with TypeScript in the future:

declare module 'react-easy-panzoom' {
  interface PanZoom extends React.ReactElement {
    zoomIn(zoomSpeed?: number): void;
    zoomOut(zoomSpeed?: number): void;
    autoCenter(zoom: number, animate?: boolean = true): void;
    reset(): void;
    moveByRatio(x: number, y: number, moveSpeedRatio?: number): void;
    rotate(angle: number | ((prevAngle: number) => number)): void;
  }

  export interface OnStateChangeData {
    x: number;
    y: number;
    scale: number;
    angle: number;
  }

  function PanZoom(props: {
    autoCenter?: boolean;
    autoCenterZoomLevel?: number;
    zoomSpeed?: number;
    doubleZoomSpeed?: number;
    disabled?: boolean;
    disableKeyInteraction?: boolean;
    disableDoubleClickZoom?: boolean;
    disableScrollZoom?: boolean;
    realPinch?: boolean;
    minZoom?: number;
    keyMapping?: { [key: string]: { x: number; y: number; z: number } };
    maxZoom?: number;
    enableBoundingBox?: boolean;
    boundaryRatioVertical?: number;
    boundaryRatioHorizontal?: number;
    noStateUpdate?: boolean;
    onPanStart?: (event: React.MouseEvent) => void;
    onPan?: (event: React.MouseEvent) => void;
    onPanEnd?: (event: React.MouseEvent) => void;
    preventPan?: (event: React.MouseEvent, x: number, y: number) => boolean;
    style?: React.StyleHTMLAttributes;
    onStateChange?: (data: OnStateChangeData) => void;
    children: React.ReactNode;
  }): React.ReactElement;
}

Also, if you are interested, I can create pull request and integrate this type information into the library (it will be a separate file, so it doesn't change the existing source code of the library in any way), so that people who install the package via npm will be able to take advantage of it automatically.

And if not, that's fine too, at least people will be able to refer to this issue and find the type definitions here.

Thanks again for creating and maintaining react-easy-panzoom 👍

[R-Peleg]

Thank you so much! I too would love seeing it a part of the project itself.