React Images Extended

Compared to the legacy package, this fork is powered by:

• ✨ The latest version of React
• 📝 No JavaScript, all TypeScript
• 🎨 Easy styling with Tailwind CSS
• 📦 Better package management with PNPM
• 🖼️ Modern Display-PiP compatibility

📸 Demo

Core Functionality

Picture-in-Picture Behavior

🔗 Useful Links (Work in progress)

| Resource | Description | |----------|-------------| | 📦 NPM Package | Install and view package details | | 🧪 Test Locally | How to test and run locally | | 🤝 Contributing | How to contribute | | 📚 Basic Usage | Understanding the demo and basic usage |

🚀 Quick Start

npm install react-images-extended-2

import { Lightbox, IImage } from 'react-images-extended-2';
import 'react-images-extended-2/dist/styles.css';

const images: IImage[] = [
  { src: 'image1.jpg', caption: 'Image 1' },
  { src: 'image2.jpg', caption: 'Image 2' },
];

function App() {
  return (
    <Lightbox
      images={images}
      onClose={() => setIsOpen(false)}
      showThumbnails={true}
    />
  );
}

✨ Features

• Zoom, rotate, and drag functionality
• Thumbnail navigation
• Keyboard shortcuts
• Touch/gesture support

• Picture-in-Picture mode
• Full TypeScript support
• Tailwind CSS styling
• Responsive design

Made with ❤️ by Isla