https://github.com/skozer/react-instagram-zoom-slider

🌄↔️ A slider component with pinch to zoom capabilities inspired by Instagram
https://github.com/skozer/react-instagram-zoom-slider

carousel instagram pinch-to-zoom react slider zoom

Last synced: about 2 months ago
JSON representation

🌄↔️ A slider component with pinch to zoom capabilities inspired by Instagram

• Host: GitHub
• URL: https://github.com/skozer/react-instagram-zoom-slider
• Owner: skozer
• License: mit
• Created: 2020-02-16T00:44:22.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T07:23:05.000Z (almost 2 years ago)
• Last Synced: 2024-10-19T09:06:45.299Z (about 2 months ago)
• Topics: carousel, instagram, pinch-to-zoom, react, slider, zoom
• Language: JavaScript
• Homepage: https://skozer.github.io/react-instagram-zoom-slider/
• Size: 3.44 MB
• Stars: 77
• Watchers: 5
• Forks: 27
• Open Issues: 39
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components - react-instagram-zoom-slider - [demo](https://skozer.github.io/react-instagram-zoom-slider/) - A slider component with pinch to zoom capabilities inspired by Instagram. (UI Components / Carousel)
• awesome-react - react-instagram-zoom-slider - A slider component with pinch to zoom capabilities inspired by Instagram.  (UI Components / Carousel)
• awesome-react-components - react-instagram-zoom-slider - [demo](https://skozer.github.io/react-instagram-zoom-slider/) - A slider component with pinch to zoom capabilities inspired by Instagram. (UI Components / Carousel)
• fucking-awesome-react-components - react-instagram-zoom-slider - 🌎 [demo](skozer.github.io/react-instagram-zoom-slider/) - A slider component with pinch to zoom capabilities inspired by Instagram. (UI Components / Carousel)

README

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

[![NPM](https://img.shields.io/npm/v/react-instagram-zoom-slider?style=flat-square)](https://www.npmjs.com/package/react-instagram-zoom-slider)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-instagram-zoom-slider?style=flat-square)](https://bundlephobia.com/result?p=react-instagram-zoom-slider)

## Example

[![react-instagram-zoom-slider demo](https://i.imgur.com/cpz7qNY.gif)](https://skozer.github.io/react-instagram-zoom-slider/)

[**👉 View this interactive demo here**](https://skozer.github.io/react-instagram-zoom-slider/)

## Install

```bash

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

```

## Usage

```jsx

import React, { Component } from 'react'

import ZoomSlider from 'react-instagram-zoom-slider'

function App() {

  const slides = [, ]

  return 

}

```

### 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](https://github.com/skozer) 2020.