React Zoomer Image

React Zoomer Image is a simple React component to zoom images. It's strongly inspired by the beautiful Medium zoom effect.

Click here to try the online demo version.

Table of contents

• Install
• Example
• Usage
• Props
• Contributing

Install

You can install React Zoomer Image with npm:

npm install react-zoomer-image

or with Yarn:

yarn add react-zoomer-image

Example

You can see React Zoomer Image on action by running with npm:

npm run example:serve

or with yarn:

yarn example:serve

Usage

You just need to import the package:

import { ZoomerImage } from "react-zoomer-image";

and use it into your React components. e.g.

import React, { Component } from "react";
import { ZoomerImage } from "react-zoomer-image";
 
class AwesomeComponent extends Component {
  render() {
    return (
      <div className="awesome-component">
        <ZoomerImage
          zoomId="awesome-image"
          imgAlt="Awesome Image"
          imgTitle="This is a really awesome image!"
          imgSrc="http://awesome.image/foo.jpg"
        />
      </div>
    );
  }
}

Then you'll just have to click on the image and enjoy the magic!

Props

Contributing

Do you like React Zoomer Image and would you like to help? Feel free to fork, open issues and ask for Pull Requests! <3