Morioh
Login
NodeJS Tutorial

NodeJS Tutorial

4 years ago

Top 10 Awesome React Zoom Image Components

Explore the top 10 awesome React zoom image components to help you create interactive and engaging image galleries for your apps. These components make it easy to zoom in and out of images, pan across images, and add other features such as captions and lightboxes.

When shopping online or browsing the galary, we’d like to zoom in the image which takes small space for neat view or loading speed related resons. So here are 10 Awesome React Zoom Image Components to allow your customers to zoom the images on your ecommerce site

1: React Map Interaction

Add map like zooming and panning to any React element. This works on both touch devices (pinch to zoom, drag to pan) as well as with a mouse or trackpad (wheel scroll to zoom, mouse drag to pan).

Install

npm install --save react-map-interaction

Usage

Basic

import { MapInteractionCSS } from 'react-map-interaction';

// This component uses CSS to scale your content.
// Just pass in content as children and it will take care of the rest.
const ThingMap = () => {
  return (
    <MapInteractionCSS>
      <img src="path/to/thing.png" />
    </MapInteractionCSS>
  );
}

Usage without CSS

import { MapInteraction } from 'react-map-interaction';

// Use MapInteraction if you want to determine how to use the resulting translation.
const NotUsingCSS = () => {
  return (
    <MapInteraction>
      {
        ({ translation, scale }) => { /* Use the passed values to scale content on your own. */ }
      }
    </MapInteraction>
  );
}

View on GitHub: https://github.com/strateos/react-map-interaction 

2: React Zoom Pan Pinch

React library to support easy zoom, pan, pinch on various html dom elements like images and divs.

Key Features

  • Fast and easy to use
  • Light, without external dependencies
  • Mobile gestures, touchpad gestures and desktop mouse events support
  • Powerful context usage, which gives you a lot of freedom
  • Highly customizable
  • Animations and Utils to create own tools
  • Advanced hooks and components

Installation

npm install --save react-zoom-pan-pinch
or
yarn add react-zoom-pan-pinch

Examples

import React, { Component } from "react";

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

const Example = () => {
  return (
    <TransformWrapper>
      <TransformComponent>
        <img src="image.jpg" alt="test" />
      </TransformComponent>
    </TransformWrapper>
  );
};

View on GitHub: https://github.com/BetterTyped/react-zoom-pan-pinch 

3: React Image Magnify

A responsive React image zoom component for touch and mouse. Designed for shopping site product detail. Features Include: In-place and side-by-side image enlargement, Positive or negative space guide lens options, Interaction hint, Configurable enlarged image dimensions, Optional enlarged image external render, Hover intent, Long-press gesture, Fade transitions, Basic react-slick carousel support.

React Image Magnify

Features Include:

  • In-place and side-by-side image enlargement
  • Positive or negative space guide lens options
  • Interaction hint
  • Configurable enlarged image dimensions
  • Optional enlarged image external render
  • Hover intent
  • Long-press gesture
  • Fade transitions
  • Basic react-slick carousel support

Installation

npm install react-image-magnify

Usage

If you are upgrading from v1x to v2x, please see the release notes.

import ReactImageMagnify from 'react-image-magnify';
...
<ReactImageMagnify {...{
    smallImage: {
        alt: 'Wristwatch by Ted Baker London',
        isFluidWidth: true,
        src: watchImg300
    },
    largeImage: {
        src: watchImg1200,
        width: 1200,
        height: 1800
    }
}} />
...

View on GitHub: https://github.com/ethanselzer/react-image-magnify 

 

4: React Img Zoom

A React component to zoom images on hover.

Installation

npm install react-img-zoom

Basic usage

The component has only four required props: the link to the image, the zoom scale, the width and height (in pixels).

import Zoom from 'react-img-zoom'

<Zoom
  img="link-to-img"
  zoomScale={3}
  width={600}
  height={600}
/>

View on GitHub: https://github.com/LeoNero/react-img-zoom 

5: React Image Zoom

React component for desktop browsers for image zoom on mouse hover.

Install

npm install react-image-zoom --save

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import ReactImageZoom from 'react-image-zoom';

const props = {width: 400, height: 250, zoomWidth: 500, img: "1.jpg"};
ReactDOM.render(<ReactImageZoom {...props} />, document.getElementById('react-app'));

View on Github: https://github.com/malaman/react-image-zoom 

6: React Pinch Zoom Pan

A react component that lets you add pinch-zoom and pan sub components. On touch you can pinch-zoom and pan the zoomed image. On desktop you can ‘pinch’ by holding down your ALT-key and do a mousedown from center of inner content onto the edges.

Install

npm install react-pinch-zoom-pan

Usage

Take a look at demo/App.js for usage, you can also run it in your local enviroment by

npm install & npm start

and open localhost:3001

import React, {Component} from 'react'
import {PinchView} from 'react-pinch-zoom-pan'

class App extends Component {
  render () {
    return (
      <PinchView debug backgroundColor='#ddd' maxScale={4} containerRatio={((400 / 600) * 100)}>
        <img src={'http://lorempixel.com/600/400/nature/'} style={{
          margin: 'auto',
          width: '100%',
          height: 'auto'
        }} />
      </PinchView>
    )
  }
}

View on GitHub: https://github.com/gerhardsletten/react-pinch-zoom-pan 

7: React Svg Pan Zoom

A React component that adds pan and zoom features to SVG.

Features

This component can work in four different modes depending on the selected tool:

  • With the tool pan the user can move the image and drag it around within the viewer, but can't interact with SVG child elements.
  • With the tool zoom the user can scale the image either with a point click or selecting a region to zoom the specified area, but can't interact with SVG child elements.
  • With the tool none the user can interact with SVG child elements and trigger events.
  • With the tool auto the user can interact with SVG child elements, perform pan (dragging the image), zoom in (double click), zoom out (double click + shift).

Install

NPM

npm install --save react-svg-pan-zoom

YARN

yarn add react-svg-pan-zoom

UMD

<script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
<script src="https://unpkg.com/react-svg-pan-zoom@3"></script>

View on GitHub: https://github.com/chrvadala/react-svg-pan-zoom 

8: React Prismazoom

A pan and zoom component for React, using CSS transformations.

Zoom features 

  • Zoom with the mouse wheel or a two-finger pinch
  • Zoom using double-click or double-tap
  • Zoom on the selected area and center

Pan features 

  • Pan with the mouse pointer or with one finger when zoomed-in
  • Intuitive panning depending on available space when zoomed-in
  • Adjusts cursor style to indicate in which direction the element can be moved

Installation

Install the component

$ npm i -D react-prismazoom

View on GitHub: https://github.com/sylvaindubus/react-prismazoom 

9: React Medium Image Zoom

Medium.com style image zoom for React. This library is a React.js implementation of Medium.com’s image zoom that allows for low-resolution and high-resolution images to work together for a “zooming” effect and works regardless of parent elements that have overflow: hidden or parents with transform properties.

Quickstart

npm install --save react-medium-image-zoom

import React from 'react'
import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'

export const MyImg = () => (
  <Zoom>
    <img
      alt="That Wanaka Tree, New Zealand by Laura Smetsers"
      src="/path/to/thatwanakatree.jpg"
      width="500"
    />
  </Zoom>
)

View on GitHub: https://github.com/rpearce/react-medium-image-zoom 

10: React Responsive Pinch Zoom Pan

Enables zooming and panning an image or canvas, both mobile and desktop. Min and max zoom settings. Animated transitions.

Install

npm install react-responsive-pinch-zoom-pan --save

Usage

import React from "react";
import PinchZoomPan from "react-responsive-pinch-zoom-pan";

const App = () => {
    return (
        <div style={{ width: '500px', height: '500px' }}>
            <PinchZoomPan>
                <img alt='Test Image' src='http://picsum.photos/750/750' />
            </PinchZoomPan>
        </div>
    );
};

View on GitHub: https://github.com/bradstiff/react-responsive-pinch-zoom-pan 

Thạnks for reading !!! 

#reactjs #javascript #programming

Top 10 Awesome React Zoom Image Components
848.30 GEEK