fix broken typescript import types

Author: xiaolin

README.md

@@ -65,6 +65,55 @@ For more examples, see [`example/App.jsx`](https://github.com/xiaolin/react-imag
 
 <br />
 
+## 📘 TypeScript
+
+This package includes TypeScript definitions. Import types for props, items, and refs:
+
+```tsx
+import ImageGallery from "react-image-gallery";
+import type {
+  GalleryItem,
+  ImageGalleryProps,
+  ImageGalleryRef,
+} from "react-image-gallery";
+
+const images: GalleryItem[] = [
+  {
+    original: "https://picsum.photos/id/1018/1000/600/",
+    thumbnail: "https://picsum.photos/id/1018/250/150/",
+    originalAlt: "Mountain landscape",
+    description: "A beautiful mountain view",
+  },
+  {
+    original: "https://picsum.photos/id/1015/1000/600/",
+    thumbnail: "https://picsum.photos/id/1015/250/150/",
+    originalAlt: "Flowing river",
+  },
+  {
+    original: "https://picsum.photos/id/1019/1000/600/",
+    thumbnail: "https://picsum.photos/id/1019/250/150/",
+    originalAlt: "Sunset over the ocean",
+  },
+];
+
+function MyGallery() {
+  const galleryRef = useRef<ImageGalleryRef>(null);
+
+  const handleClick = () => {
+    galleryRef.current?.fullScreen();
+  };
+
+  return (
+    <>
+      <ImageGallery ref={galleryRef} items={images} />
+      <button onClick={handleClick}>Enter Fullscreen</button>
+    </>
+  );
+}
+```
+
+<br />
+
 ## ⚙️ Props
 
 - `items`: (required) Array of objects. Available properties:
@@ -153,9 +202,12 @@ For more examples, see [`example/App.jsx`](https://github.com/xiaolin/react-imag
 
 The following functions can be accessed using [refs](https://reactjs.org/docs/refs-and-the-dom.html)
 
-- `play()`: plays the slides
-- `pause()`: pauses the slides
-- `toggleFullScreen()`: toggles full screen
+- `play()`: starts the slideshow
+- `pause()`: pauses the slideshow
+- `togglePlay()`: toggles between play and pause
+- `fullScreen()`: enters fullscreen mode
+- `exitFullScreen()`: exits fullscreen mode
+- `toggleFullScreen()`: toggles fullscreen mode
 - `slideToIndex(index)`: slides to a specific index
 - `getCurrentIndex()`: returns the current index
 

package.json

@@ -31,6 +31,7 @@
   },
   "exports": {
     ".": {
+      "types": "./build/types/types.d.ts",
       "import": "./build/image-gallery.es.js",
       "require": "./build/image-gallery.cjs"
     },
@@ -121,4 +122,4 @@
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   }
-}
+}

scripts/test-package.sh

@@ -165,10 +165,82 @@ for (const type of essentialTypes) {
     process.exit(1);
   }
 }
+
+// Check for default export declaration
+if (!typesContent.includes('export default')) {
+  console.error('❌ Missing default export in types');
+  process.exit(1);
+}
+console.log('✅ Default export is declared');
 EOF
 
 node test-types.mjs
 
+# Test TypeScript compilation with modern module resolution (node16/nodenext/bundler)
+echo -e "${YELLOW}🧪 Testing TypeScript compilation with modern moduleResolution...${NC}"
+npm install typescript @types/react --silent
+
+cat > test-ts.ts << 'EOF'
+import ImageGallery from 'react-image-gallery';
+import type { GalleryItem, ImageGalleryProps, ImageGalleryRef } from 'react-image-gallery';
+
+// Test default import is a valid component type
+const gallery: typeof ImageGallery = ImageGallery;
+
+// Test named type imports
+const item: GalleryItem = { original: 'test.jpg' };
+const props: ImageGalleryProps = { items: [item] };
+
+// Test ref type
+const ref: ImageGalleryRef | null = null;
+
+console.log('✅ TypeScript types work correctly');
+EOF
+
+# Test with moduleResolution: bundler (common modern setup)
+cat > tsconfig.json << 'EOF'
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["test-ts.ts"]
+}
+EOF
+
+if npx tsc --noEmit 2>&1; then
+  echo -e "${GREEN}✅ TypeScript compilation (bundler) passed${NC}"
+else
+  echo -e "${RED}❌ TypeScript compilation (bundler) failed${NC}"
+  exit 1
+fi
+
+# Test with moduleResolution: node16 (stricter, used by many projects)
+cat > tsconfig.json << 'EOF'
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["test-ts.ts"]
+}
+EOF
+
+if npx tsc --noEmit 2>&1; then
+  echo -e "${GREEN}✅ TypeScript compilation (node16) passed${NC}"
+else
+  echo -e "${RED}❌ TypeScript compilation (node16) failed${NC}"
+  exit 1
+fi
+
 # Cleanup
 echo -e "${YELLOW}🧹 Cleaning up...${NC}"
 cd /

src/types.ts

@@ -6,6 +6,7 @@ import {
   SyntheticEvent,
   TouchEvent,
 } from "react";
+import type React from "react";
 
 // ============= Gallery Item Types =============
 
@@ -515,3 +516,11 @@ export type SwipeDirection = "Left" | "Right" | "Up" | "Down";
 export interface SVGProps {
   strokeWidth?: number;
 }
+
+// ============= Default Export Declaration =============
+// This declares the ImageGallery component type for consumers
+// The actual implementation is in ImageGallery.tsx
+declare const ImageGallery: React.ForwardRefExoticComponent<
+  ImageGalleryProps & React.RefAttributes<ImageGalleryRef>
+>;
+export default ImageGallery;