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:

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

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

`jsx
import React, { Component } from "react";
import { ZoomerImage } from "react-zoomer-image";

class AwesomeComponent extends Component {
render() {
return (



);
}
}
``

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