ImagePreview and ImagePreviewGroup Components

The ImagePreview and ImagePreviewGroup are fully customizable React components for rendering and previewing images. They allow users to view images with features like zooming, rotating, and navigation through grouped images. These components also support dynamic styling and class customization.

Installation

To use these components, copy the ImagePreview and ImagePreviewGroup code into your project or install them from your published package if available.

Components

1. ImagePreview

ImagePreview allows a single image to be displayed with optional features like zooming, rotating, and a full-screen preview.

Basic Example

import React from 'react';
import { ImagePreview } from 'react-simple-image-preview';

const App: React.FC = () => {
  return (
    <div>
      <h1>Image Preview Example</h1>
      <ImagePreview
        src="https://via.placeholder.com/300"
        alt="Sample Image"
        width={300}
        height={200}
      />
    </div>
  );
};

export default App;

2. ImagePreviewGroup

ImagePreviewGroup enables grouping multiple ImagePreview components to provide navigation between them.

Basic Example

import React from 'react';
import { ImagePreviewGroup, ImagePreview } from 'react-simple-image-preview';

const App: React.FC = () => {
  return (
    <div>
      <h1>Image Preview Group Example</h1>
      <ImagePreviewGroup>
        <ImagePreview
          src="https://via.placeholder.com/300"
          alt="Image 1"
          width={300}
          height={200}
        />
        <ImagePreview
          src="https://via.placeholder.com/400"
          alt="Image 2"
          width={300}
          height={200}
        />
        <ImagePreview
          src="https://via.placeholder.com/500"
          alt="Image 3"
          width={300}
          height={200}
        />
      </ImagePreviewGroup>
    </div>
  );
};

export default App;

Advanced Customization

Using Custom Styles, Classes, and Icons

You can pass your own styles, classes, or icons to the images for better control over their appearance.

Example

<ImagePreview
  src="https://via.placeholder.com/300"
  alt="Custom Styled Image"
  width={300}
  height={200}
  style={{
    objectFit: 'cover',
    borderRadius: '8px',
  }}
  className="custom-image-class"
  icon={<MyCustomIcon />}
  iconPosition="topLeft"
  onIconClick={() => alert('Icon clicked!')}
/>

Props

ImagePreview Props

| Prop Name | Type | Default | Description | |-------------------|---------------------|---------------|-----------------------------------------------------------------------------| | src | string | undefined | The source URL of the image. | | alt | string | undefined | Alternative text for the image. | | width | number | undefined | The width of the image (in pixels). | | height | number | undefined | The height of the image (in pixels). | | preview | boolean | true | Enables the preview functionality. | | onClick | function | undefined | Custom callback when the image is clicked. | | style | CSSProperties | {} | Inline styles for the container. | | className | string | '' | Custom class name for the container. | | imgStyle | CSSProperties | {} | Inline styles for the image. | | imgClassName | string | '' | Custom class name for the image. | | modalStyle | CSSProperties | {} | Inline styles for the modal. | | modalClassName | string | '' | Custom class name for the modal. | | icon | ReactNode | undefined | Icon to display on the image. | | iconPosition | 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' | 'topRight' | Position of the icon. | | onIconClick | function | undefined | Callback when the icon is clicked. |

ImagePreviewGroup Props

| Prop Name | Type | Default | Description | |------------|------------|-------------|-----------------------------------------------------------------------------| | children | ReactNode| undefined | ImagePreview components to include in the group. | | onChange | function | undefined | Callback when the current image changes in the group. | | gap | string | '16px' | Spacing between grouped images. |

Features

• Zoom and Rotate: Easily zoom in/out or rotate images with intuitive controls.
• Group Navigation: Navigate between grouped images using ImagePreviewGroup.
• Dynamic Styling: Fully customizable styles, classes, and inline properties for images and modals.
• Icons and Actions: Add interactive icons to images and respond to icon clicks with custom callbacks.
• Lightweight Modal: Images open in an interactive modal for full-screen viewing.
• Accessibility: Includes ARIA attributes for screen readers and is keyboard-friendly.

Accessibility

These components are designed with accessibility in mind. They include ARIA attributes and ensure a seamless user experience for screen readers.

Contributing

Contributions are welcome! If you find bugs or have feature requests, feel free to open an issue or submit a pull request to the GitHub repository.

License

This component library is open-source and freely available for use.

Enjoy using the ImagePreview and ImagePreviewGroup components! Let us know if you have any feedback or improvements to suggest.