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

$ yarn add react-medium-image-zoom

Basic Usage

Import the component and the component's CSS and then wrap whatever you want to be "zoomable" with this component:

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

API

You can pass options to the default <Zoom> component (Controlled.js):

Prop	Type	Required	Default	Details
`closeText`	`String`	no	`'Unzoom Image'`	Accessible label text for when you want to unzoom
`openTextText`	`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
`zoomMargin`	`Number`	no	`0`	Offset in pixels the zoomed image should be from the `window`' boundaries

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} 🤔