Merge pull request #156 from sasza2/feat/export-types-and-ref-change

feat: export types and ref changes

.changeset/odd-deers-prove.md

@@ -0,0 +1,5 @@
+---
+"@sasza/react-panzoom": minor
+---
+
+export types and ref changes

package.json

@@ -7,7 +7,8 @@
   "exports": {
     ".": {
       "import": "./dist/main.js",
-      "require": "./dist/main.umd.cjs"
+      "require": "./dist/main.umd.cjs",
+      "types": "./types/index.d.ts"
     }
   },
   "keywords": [

src/PanZoom.tsx

@@ -1,5 +1,5 @@
 import React, {
-  forwardRef, MutableRefObject, useLayoutEffect,
+  forwardRef, Ref, useLayoutEffect,
 } from 'react';
 import initPanZoom, { getAllowedProps } from 'panzoom-core';
 
@@ -8,7 +8,7 @@ import usePanZoom from './usePanZoom';
 
 const panZoomAllowedProps = getAllowedProps();
 
-const PanZoom: React.FC<PanZoomProps & { apiRef?: MutableRefObject<PanZoomApi> }> = ({
+const PanZoom: React.FC<PanZoomProps & { apiRef?: Ref<PanZoomApi> }> = ({
   apiRef,
   children,
   ...props
@@ -27,14 +27,15 @@ const PanZoom: React.FC<PanZoomProps & { apiRef?: MutableRefObject<PanZoomApi> }
       ...props,
       className: props.className || 'react-panzoom',
     });
+    panZoomRef.current.setOptions(props)
     setInitialized(true);
     return panZoomRef.current.destroy;
   }, []);
 
   return render;
 };
 
-const PanZoomRef = forwardRef((props: PanZoomProps, ref: MutableRefObject<PanZoomApi>) => (
+const PanZoomRef = forwardRef((props: PanZoomProps, ref: Ref<PanZoomApi>) => (
   <PanZoom {...props} apiRef={ref} />
 )) as React.FC<PanZoomPropsRef>;
 

src/usePanZoom.tsx

@@ -21,7 +21,7 @@ const usePanZoom = <T extends keyof PanZoomOptions, >({
   props,
 }: React.PropsWithChildren<{
   allowedProps: Array<T>,
-  apiRef: React.MutableRefObject<PanZoomApi>,
+  apiRef: React.Ref<PanZoomApi>,
   props: PanZoomOptions,
 }>): PanZoomReturn => {
   const childRef = useRef<HTMLDivElement>();
@@ -36,8 +36,9 @@ const usePanZoom = <T extends keyof PanZoomOptions, >({
   }, deps);
 
   useImperativeHandle(
-    apiRef,
+    initialized ? apiRef : undefined,
     () => panZoomRef.current,
+    [initialized],
   );
 
   const value = useMemo(() => ({

types/types.ts

@@ -92,7 +92,7 @@ export type PanZoomOptions = {
 
 export type PanZoomProps = React.PropsWithChildren<PanZoomOptions>
 
-export type PanZoomPropsRef = PanZoomProps & { ref?: React.MutableRefObject<API> }
+export type PanZoomPropsRef = PanZoomProps & { ref?: React.Ref<API> }
 
 export type PanZoomWithCoverOmit = Omit<PanZoomOptions, 'boundary'>
 
@@ -102,7 +102,7 @@ export type PanZoomWithCoverProps = React.PropsWithChildren<{
 } & PanZoomWithCoverOmit>
 
 export type PanZoomWithCoverPropsRef = PanZoomWithCoverProps & {
-  ref?: React.MutableRefObject<API>
+  ref?: React.Ref<API>
 }
 
 export type PanZoomApi = {