react-medium-image-zoom

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

As an added bonus, it should let you zoom anything.

Links

• Installation
• Basic Usage
• API
• Migrating From v3 to v4
• Contributors
• Storybook Examples
• Changelog
• Contributing
• Code of Conduct

Installation

$ npm i react-medium-image-zoom

or

$ yarn add react-medium-image-zoom

Options

interface ImageZoomOpts {
  closeText?: string
  isControlled?: boolean
  isZoomed?: boolean
  modalText?: string
  onZoomChange?: (isZoomed: boolean) => void
  openText?: string
  overlayBgColorEnd?: string
  overlayBgColorStart?: string
  scrollableEl?: HTMLElement | Window
  transitionDuration?: string
  zoomMargin?: number
  zoomZindex?: number
}

• closeText
  • accessible text for unzooming
  • default: Press to unzoom image
• isControlled
  • flag to specify that you intend to control the component's state yourself
  • default: false
• isZoomed
  • flag used in conjunction with isControlled to specify the zoom / unzoom state of the component
  • default: false
• modalText
  • accessible modal dialog text when zoomed
  • default: Zoomed item
• onZoomChange
  • callback that is called with true when the zooming should be triggered
  • default: undefined
• openText
  • accessible text for zooming
  • default: Press to zoom image
• overlayBgColorEnd
  • modal dialog overlay ending background color
  • default: rgba(255, 255, 255, 0.95)
• overlayBgColorStart
  • modal dialog overlay starting background color
  • default: rgba(255, 255, 255, 0)
• scrollableEl
  • HTMLElement | Window to be used for the scrolling listener
  • default: window
• transitionDuration
  • length of time for the animations to run
  • default: 300ms
• zoomMargin
  • amount the zoomed item should be offset from the window
  • default: 0
• zoomZindex
  • z-index value the modal dialog should have
  • default: 2147483647

Usage

Regular Usage

import { useImageZoom } from 'react-medium-image-zoom'

const MyComponent = () => {
  const { ref } = useImageZoom({ /* image zoom options here */ })

  return (
    <img
      alt="that wanaka tree"
      ref={ref}
      src="/path/to/thatwanakatree.jpg"
      width="500"
    />
  )
}

Usage with <picture>

import { useImageZoom } from 'react-medium-image-zoom'

const MyComponent = () => {
  const { ref } = useImageZoom({ /* image zoom options here */ })

  return (
    <picture>
      <source media="(max-width: 800px)" srcSet="/path/to/teAraiPoint.jpg" />
      <img
        alt="that wanaka tree"
        ref={ref}
        src="/path/to/thatwanakatree.jpg"
        width="500"
      />
    </picture>
  )
}

Usage with <figure>

import { useImageZoom } from 'react-medium-image-zoom'

const MyComponent = () => {
  const { ref } = useImageZoom({ /* image zoom options here */ })

  return (
    <figure>
      <img
        alt="that wanaka tree"
        ref={ref}
        src="/path/to/thatwanakatree.jpg"
        width="500"
      />
      <figcaption>That Wanaka Tree</figcaption>
    </figure>
  )
}

Usage with non-image element

Tools like gatsby have their own Image elements that can be difficult to add a ref to. There are also instances where you may want to zoom anything from a p to an svg to a div. Here is an example of how you can do that:

import { useImageZoom } from 'react-medium-image-zoom'

const MyComponent = () => {
  const { ref } = useImageZoom({ /* image zoom options here */ })

  return (
    <div ref={ref}>
      {/* what you want the div to zoom */}
    </div>
  )
}