Popularity
2.1
Declining
Activity
0.0
Stable
77
5
27

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: UI Components     Slider     React     Image Slider     Gallery     Zoom    
Latest version: v1.4.0

react-instagram-zoom-slider alternatives and similar libraries

Based on the "Slider" category.
Alternatively, view react-instagram-zoom-slider alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-instagram-zoom-slider or a related project?

Add another 'Slider' Library

README

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

NPM npm bundle size

Example

react-instagram-zoom-slider demo

๐Ÿ‘‰ View this interactive demo here

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.

License

MIT Licensed. Copyright ยฉ Sean Kozer 2020.


*Note that all licence references and agreements mentioned in the react-instagram-zoom-slider README section above are relevant to that project's source code only.