LensView

LensView is a React component that allows users to view images with zoom and drag functionalities. This component enhances image viewing experiences by providing intuitive controls for navigation and manipulation.

Features

• Zoom in and out on images using mouse scroll
• Drag images around when zoomed in
• Navigate between images using next and previous buttons
• Close the image view with a simple button click

Installation

To install the LensView component, use npm or yarn:

npm install react-lensview

or

yarn add react-lensview

Usage

Here’s a simple example of how to use the LensView component in your React application:

TypeScript Example (.ts or .tsx)

• Step 1: Import Packages

// Import React and required hooks
import React, { useState } from 'react';

// Import LensView package
import LensView from 'react-lensview';

• Step 2: Create the Image Array

// Image array with src, alt and other attributes
const imageArray = [
  { src: 'image-1.jpg', alt: 'Image 1', name: "name-1" },
  { src: 'image-2.jpg', alt: 'Image 2', name: "name-2" },
  { src: 'image-3.jpg', alt: 'Image 3', name: "name-3" },
];

• Step 3: Create the Lensview Component

const App: React.FC = () => {
  const [isImageOpen, setIsImageOpen] = useState<boolean>(false);
  const [currentImageIndex, setCurrentImageIndex] = useState<number>(0);

  const openImage = (index: number) => {
    setCurrentImageIndex(index);
    setIsImageOpen(true); 
  };

  const closeImage = () => {
    setIsImageOpen(false);
  };

  return (
    <LensView
      images={imageArray}
      isImageOpen={isImageOpen} 
      currentImageIndex={currentImageIndex}
      openImage={openImage}  
      closeImage={closeImage}   
      controls={{ enableZoom: true, enableDrag: true }} 
    >
      {imageArray.map((image, index) => (
        <div key={index} onClick={() => openImage(index)}>
          <img src={image.src} alt={image.alt} />
        </div>
      ))}
    </LensView>
  );
};

export default App;

Props

LensView Component Props

| Prop | Type | Required | Default Value | Description | | ----------------- | ------------------------------ | -------- | ---------------------------------------- | ------------------------------------------------------------------------------------------- | | images | { src: string; alt: string }[] | Yes | N/A | An array of image objects containing src (URL of the image) and alt (alternative text). | | children | React.ReactNode | Yes | N/A | Child components or elements to be displayed alongside the image viewer. | | isImageOpen | boolean | Yes | N/A | A flag indicating whether the image viewer is open or closed. | | currentImageIndex | number | Yes | N/A | The index of the currently displayed image in the images array. | | openImage | (index: number) => void | Yes | N/A | Function to open an image at a specified index. | | closeImage | () => void | Yes | N/A | Function to close the image viewer. | | controls | IControls | No | { enableZoom: false, enableDrag: false } | An object to configure controls; includes enableZoom and enableDrag flags. |

Explanation of the Props

images: This prop accepts an array of image objects. Each object must contain a src string for the image URL and an alt string for alternative text, which is important for accessibility.

children: The children prop allows you to pass any valid React elements that will be displayed alongside the image viewer, such as thumbnails or additional content.

isImageOpen: A boolean that determines if the image viewer is currently displayed. It should be true when an image is selected.

currentImageIndex: The index of the currently displayed image. This is necessary for navigating between images.

openImage: A function that is called with an index to open a specific image in the viewer.

closeImage: A function that closes the image viewer when called.

controls: An optional prop that configures whether zoom and drag functionalities are enabled. If not provided, both features are disabled by default.

License

Feel free to submit issues or pull requests for improvements and bug fixes!

This Markdown document provides a comprehensive overview of your LensView component, guiding users on how to install, use, and customize it in their projects. You can modify the sections as needed to suit your specific requirements or add any additional information.