Package Exports

react-medium-image-zoom

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-medium-image-zoom) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-medium-image-zoom

This library is a different implementation of Medium.com's image zoom that allows for a low-res and high-res images to work together for "zooming" effects, works regardless of parent elements that have overflow: hidden and is made to work explicitly with React.js >= v0.14.

You can view the demo here.

Installation

$ npm install --save react-medium-image-zoom

Usage

import ImageZoom from 'react-medium-image-zoom'

const MyComponent = (props) =>
  <div>
    <p>Some text...</p>

    <ImageZoom
      image={{
        src: 'bridge.jpg',
        alt: 'Golden Gate Bridge',
        className: 'img',
        style: { width: '50em' }
      }}
      zoomImage={{
        src: 'bridge-big.jpg',
        alt: 'Golden Gate Bridge'
      }}
    />

    <p>Some text...</p>
  </div>

The component accepts three props:

image [ object | required ]: the original image
zoomImage [ object | optional ]: the image to be used for zooming
replaceImage [ boolean | optional | default true ]: once the image has been "zoomed" and downloaded the larger image, replace the original image. This is set to true by default.

Each one of these image props accepts normal image props, for example:

src [ string | required ]: the source for the image
alt [ string | optional ]: the alt text for the image
className [ string | optional ]: classes to apply to the image
style [ object | optional ]: additional styles to apply to the image

Browser Support

Currently, this has only been tested on the latest modern browsers. Pull requests are welcome.

Development

The source code is located within the src directory. Use $npm run build:all to build the main file as well as the example during development.

You can view the the example via $ open example/index.html.

Contribute

Check out the issues
Fork this repository
Clone your fork
Check out a feature branch ($ git checkout -b my-feature)
Make your changes and push your branch to your GitHub repo
Create a pull request from your branch to this repo's master branch
When all is merged, pull down the upstream changes to your master
Delete your feature branch