Package Exports

react-medium-image-zoom
react-medium-image-zoom/dist/styles.css

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

⚠️ WARNING

The master branch currently represents the work-in-progress for version 4.0. It is completely unstable and should not be used by anyone except contributors.

The v4.0 work is being tracked on the project board: https://github.com/rpearce/react-medium-image-zoom/projects/1

The latest stable published version is located on the v3.x branch.

react-medium-image-zoom

This library is a React.js implementation of Medium.com's image zoom that allows for low-resolution and high-resolution images to work together for a “zooming” effect and works regardless of parent elements that have overflow: hidden or parents with transform properties.

As an added bonus, it will let you zoom anything (see the Storybook Examples for more).

Installation

$ npm i react-medium-image-zoom@alpha

$ yarn add react-medium-image-zoom@alpha

Basic Usage

Uncontrolled component (default)

Import the component and the CSS, wrap whatever you want to be "zoomable" with this component and the component will handle it's own state:

import React, { useState } from 'react'
import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'

const MyComponent = () => (
  <Zoom>
    <img
      alt="that wanaka tree"
      src="/path/to/thatwanakatree.jpg"
      width="500"
    />
  </Zoom>
)

export default MyComponent

Controlled component (`Controlled`)

Import the Controlled component and the CSS, wrap whatever you want to be "zoomable" with this component and then dictate the zoomed/unzoomed state to the component. Here, we will automatically zoom the component once the image has loaded:

import React, { useCallback, useState } from 'react'
import { Controlled as ControlledZoom } from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'

const MyComponent = () => {
  const [isZoomed, setIsZoomed] = useState(false)

  const handleImgLoad = useCallback(() => {
    setIsZoomed(true)
  }, [])

  const handleZoomChange = useCallback(shouldZoom => {
    setIsZoomed(shouldZoom)
  }, [])

  return (
    <ControlledZoom isZoomed={isZoomed} onZoomChange={handleZoomChange}>
      <img
        alt="that wanaka tree"
        onLoad={handleImgLoad}
        src="/path/to/thatwanakatree.jpg"
        width="500"
      />
    </ControlledZoom>
  )
)

export default MyComponent

API

Both uncontrolled & controlled components

You can pass these options to either the default or controlled components.

Prop	Type	Required	Default	Details
`closeText`	`String`	no	`'Unzoom Image'`	Accessible label text for when you want to unzoom
`openText`	`String`	no	`'Zoom Image'`	Accessible label text for when you want to zoom
`overlayBgColorEnd`	`String`	no	`'rgba(255, 255, 255, 0.95)'`	Modal overlay background color at end of zoom
`overlayBgColorStart`	`String`	no	`'rgba(255, 255, 255, 0)'`	Modal overlay background color at start of zoom
`portalEl`	`Element`	no	`document.body`	DOM Element to which we will append the zoom modal
`scrollableEl`	`Window`	no	`window`	DOM Element to which we will listen for scroll events to determine if we should unzoom
`transitionDuration`	`Number`	no	`300`	Transition duration in milliseconds for the component to use on zoom and unzoom
`wrapStyle`	`Object`	no	`null`	Optional style object to pass to the wrapper `div`. Useful when you want the `<Zoom>` container to be `width: '100%'`, for example
`zoomMargin`	`Number`	no	`0`	Offset in pixels the zoomed image should be from the `window`' boundaries

Only the controlled component

You can pass these options to only the controlled component.

Prop	Type	Required	Default	Details
`isZoomed`	`bool`	yes	`false`	Tell the component whether or not it should be zoomed
`onZoomChange`	`Function`	no	`Function.prototype`	Listen for hints from the component about when you should zoom (`true` value) or unzoom (`false` value)

Contributors

Thanks goes to these wonderful people (emoji key):

_{Cameron Bothner} 💻 📖 🐛 💡 🤔 👀 ⚠️	_{Jeremy Bini} 💻 🐛	_ismay 🐛 🤔	_{Rajit Singh} 🐛	_{Roberto Saccon} 🐛	_wtfdaemon 🐛	_{Robert Pearce} 💻 💬 ⚠️ 🐛 💡 🎨 👀 🤔 📖
_{Josh Sloat} 🐛 💻 💡 👀 🤔 📖 🎨 💬	_Aswin 💬	_{Alex Shelkovskiy} 🐛	_{Adrian Bindiu} 🐛	_{Kendall Buchanan} 🐛	_Kaycee 💻	_Anuj 🐛 💬
_{Ludwig Frank} 🐛 💻	_LX 🐛 🤔	_{Rosen Tomov} 🐛	_{Tom Moor} 💻 🐛	_{Johan Preynat} 💻 🐛	_{Rahul Gaba} 💻 🐛	_{Spencer Davis} 💻 🤔 👀 🎨
_dnlnvl 💻	_{Sean King} 🤔