React-instagram-zoom-slider NPM

react-instagram-zoom-slider is a slider component with pinch to zoom capabilities inspired by Instagram.

Example

Install

yarn add react-instagram-zoom-slider react-spring react-use-gesture styled-components

Usage

import React, { Component } from 'react'
import ZoomSlider from 'react-instagram-zoom-slider'

function App() {
  const slides = [<img src="..." alt="First slide" />, <img src="..." alt="Second slide" />]

  return <ZoomSlider slides={slides} />
}

Common Props

Common props you may want to specify include:

Prop	Description	Default
`slides`	List of slides to render	Required
`initialSlide`	Index of the slide to be rendered by default	0
`maxScale`	Maximum zoom level	4
`minScale`	Minimum zoom level	1
`slideOverlay`	Content to overlay on the slider	null
`slideIndicatorTimeout`	Time in milliseconds until the slide indicator fades out.Set to `null` to disable this behavior.	5000
`activeDotColor`	Pagination dot color for the active slide	#4e99e9
`dotColor`	Pagination dot color for all other slides	#dadbdc

Building a custom slider

If you need to customize the slider components beyond what is available via props, you can use the useSlider and useZoom hooks to build your own components with slide and zoom functionality.