skozer / react-instagram-zoom-slider Goto Github PK

🚀 Feature Proposal

Allow for useSlider hook to provide a function to change the slide programatically.

Motivation

Split from issue #8

I'm building a lightbox with pinch to zoom and I want to use this library but need to open a photo at any position and also need to update the position programatically.

Example

const [zooming, currentSlide, changeSlide, bind, x, onScale] = useSlider({                                                            
  numSlides: previews.length,                                                                                            
  initialSlide: initialIndex,                                                                                 
})

changeSlide(3) // go to slide #4
changeSlide((currentSlide) => currentSlide + 1)) // go to slide #5

If I have many sliders one after another, then when zooming in, the bottom slider overlays on top of the zoomed image

🚀 Feature Proposal

Optional content to be overlaid on the slide at rest, then hidden when zooming - similar to the slide indicator.

Motivation

Show additional content on the slide without disturbing zoom functionality.

Example

const overlay = <div class="badge">New</div>

<Slider overlay={overlay} />

This is decent but buggy when resizing the window...definitely needs to be polished to work out edge cases...

🚀 Feature Proposal

When the user stops zoom with 2 fingers, currently the image comes back to its original size. Would be good to have an option that enables retain zoom size with one finger.

var transitions = useTransition(isVisible, null, {
from: {
opacity: 1
},
enter: {
opacity: 1
},
leave: {
opacity: 0
}
});

if (totalSlides < 2) {
return null;
}

Environment

• react-instagram-zoom-slider v1.x.x
• react-spring v9.2.6
• react-use-gesture ^7.0.4
• styled-components v5.0.x
• react v16.12.x

🚀 Feature Proposal

Allow for useSlider hook to specify an initial position and update the slide programatically.

Motivation

I'm building a lightbox with pinch to zoom and I want to use this library but need to open a photo at any position and also need to update the position programatically.

Example

const [zooming, currentSlide, changeSlide, bind, x, onScale] = useSlider({                                                            
  numSlides: previews.length,                                                                                            
  initialSlide: initialIndex,                                                                                 
})
useKey('ArrowRight', () => changeSlide(1), [changeSlide]);
useKey('ArrowLeft', () => changeSlide(-1), [changeSlide]);

🚀 Feature Proposal

Expose a prop/useSlider argument where you can pass a width in order to use the slider in situations where you don't want it taking up 100vw

Motivation

Everything works great in the mobile/tablet version of the site, but in making the desktop version we no longer want the slider to take up 100vw. It would have a fixed width, but currently this package works under the assumption that the slider will always be 100vw.

🐛 Bug Report

(A clear and concise description of what the bug is.)

Steps to reproduce

Steps to reproduce the behavior:

Expected behavior

(A clear and concise description of what you expected to happen.)

Link to example (highly encouraged)

(Please provide either a CodeSandbox demo or an example GitHub repo.)

Environment

• react-instagram-zoom-slider v1.x.x
• react-spring v8.x.x
• react-use-gesture v7.0.x
• styled-components v5.0.x
• react v16.12.x

🤓 Question

Not working with Next.js, getting a destructuring issue. Using functional components. How can I fix this?