Skip to content

๐Ÿ” React Zoomer Image: a React component to make your images zoomable.

License

Notifications You must be signed in to change notification settings

Sanfra1407/React-Zoomer-Image

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

46 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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

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