sanfra1407 / react-zoomer-image

🔍 React Zoomer Image: a React component to make your images zoomable.

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 from "react";
import { ZoomerImage } from "react-zoomer-image";

const AwesomeComponent = () => {
  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

Name	Type	Required	Description
zoomId	String	yes	Unique key to easily distinguish the image in your page. Must be unique for each image!
imgSrc	String	yes	The source of the image you want to render.
imgAlt	String	no	The text you want to insert into the image alt attribute. Useful to have a better SEO.
imgTitle	String	no	The text you want to insert into the image title attribute.

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

react-zoomer-image's Issues

Fix overflow-y when an image is zoomed.

When an image is zoomed, the pages move itself horizontally because of overflow-y.

Add timing effect as prop

Add zoom timing as prop to make possible to developers to customize the effect timing.