Skip to content
React component for zoom an image on mouse over
Branch: master
Clone or download
Polmonite Merge pull request #2 from thecreazy/master
Now use the <img /> Component
Latest commit 135809c Oct 15, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
__test__ update screenshot, added test:update script, rebuild, bump version to… Oct 15, 2018
docs
src update screenshot, added test:update script, rebuild, bump version to… Oct 15, 2018
stories now use img tag Oct 15, 2018
.babelrc added test Jul 20, 2018
.gitignore update build steps Jul 19, 2018
.npmignore
LICENSE.MD license and readme update Jul 20, 2018
README.md
jest.config.js
package.json update screenshot, added test:update script, rebuild, bump version to… Oct 15, 2018
rollup.config.js npm ignore and rollup config Jul 19, 2018
yarn.lock

README.md

🔍 React Imagezoomer 🔎

imagezoomergif

React Imagezoomer is an zoomer component for React.js.

With React Imagezoomer you can specify an image and zoom it using your mouse or your finger.

You can find the preview on Storybook

Getting started

  1. To include the code locally install @caffeina.dev/react-imagezoomer using npm:
npm install @caffeina.dev/react-imagezoomer --save
  1. To include the code globally from a cdn:
<script src="https://unpkg.com/@caffeina.dev/react-imagezoomer/dist/lib/"></script>

Dependencies

react-imagezoomer has no external dependencies, aside for the usual react and prop-types.

Documentation

Include react-imagezoomer in your component:

// using an ES6 transpiler, like babel
import ImageZoomer from 'react-imagezoomer'

// otherwise
let ImageZoomer = require('react-imagezoomer')

and set a source image to zoom

const myComponent = () => <ImageZoomer image="https://source.unsplash.com/random">

you can also pass your personal classes to change the default style of the package

const conf = {
 zommerContainerClass: 'imagezoomer',
 zommerClass: 'imagezoomer__inner'
}
const myComponent = () => <ImageZoomer conf={conf} image="https://source.unsplash.com/random">

you can change the default zoom level passing it in the config props

const conf = {
 zoom: 12
}
const myComponent = () => <ImageZoomer conf={conf} image="https://source.unsplash.com/random">

Contributing

Reporting bugs

  • Open a GitHub issue

Contributing with patches and bug fixes

  • Open a new GitHub pull request with the patch.
  • Ensure the PR description clearly describes the problem and solution.

Contributors

License

MIT

You can’t perform that action at this time.