Comments (9)
Hi @a-tonchev ! Thank you for raising this issue up! 😄
Thank you for your appreciation! I will add handlers, listeners and publish a new version before the end of next week. 👨🏻💻 Rest assured that there will be no breaking changes. I will notify you for the new version.
from react-gallery-carousel.
Hi, @a-tonchev ! I carefully considered your request of having handlers! I looked at some other components' interfaces and implementations. I read the React.js documentation at https://reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs. The docs says: "Avoid using refs for anything that can be done declaratively. For example, instead of exposing open() and close() methods on a Dialog component, pass an isOpen prop to it."
So, it would be better if developers pass the index
, isMaximized
and isAutoPlaying
. So, I decide not to add handlers at this stage, unless there are other use cases. I thank you for bring this feature request up, my investigation led me to learn something new today!
Meanwhile, I think you are right that my component needs more listeners. 😄 I will add listeners as promised.
from react-gallery-carousel.
Hi @yifaneye,
In the same screenshot that you post is recommended to use refs for the usecases I mention:
ref.fullScreen(), ref.nextSlide(), ref.goToSlide(4), because this is triggering of imperative animation
ref.play() is also okay, because it is media playback
They tell us to avoid using ref for anything that can be done declaratively like close() open() or the other props that you provide like useThumbnails, arrowIcons etc...
There is no other way slightly to jump to slide 4 than using ref, and as you can see any other gallery is using handlers 😉
from react-gallery-carousel.
Hi @a-tonchev ,
Thank you for taking time to clarify your proposal. I really appreciate your effort. 😃 You mention about the good use cases. I think these use cases in the screenshots are for directly manipulating an element, not for controlling a component.
There is way to "jump to slide 4" other than using ref, that is by passing the index
prop to my component.
I had a read on the difference between declarative vs imperative in React.js https://stackoverflow.com/questions/33655534/difference-between-declarative-and-imperative-in-react-js. I think my component provides an interface for developers to control it in a declarative style that is inline with React.js. 😉
Would you like to tell me your use case(s) please?
from react-gallery-carousel.
Hi @yifaneye,
Actually I am creator of a new online shop System SaaS, similar like Shopify. It is called JUST-SELL.online
Until now I used some galleries, but for now I stopped on yours :)
You can check a demo, where you can see your gallery in action here: https://demo2.shopsuy.com/
Well the use-case where I would like to jump on slide is when the user pick product variants (e. g. Colors) to be able the gallery to jump directly on the corresponding slide. For example the slide 4 is with the color red, and when the user is chosing from the dropdown of the product the color red the gallery will automatically open the slide 4 :)
Using refs for this reason is not something new and forbidden - as I sayd everyone is using it :)
from react-gallery-carousel.
You can make use of the useImperativeHandle API for this reason, this will attach to the refs any desired function from inside. Don't forget to use forwardRef if needed ;)
https://reactjs.org/docs/hooks-reference.html#useimperativehandle
https://www.google.com/amp/s/www.geeksforgeeks.org/react-js-useimperativehandle-additional-hook/amp/
from react-gallery-carousel.
Hi @a-tonchev ,
Thank you for sharing the demo! I really like your product! 😀 I think you can try set the current index with the index
prop in your use case for now.
Thank you for suggesting the use of useImperativeHandle
! I am going to have a try! I believe I am going to figure it out! 😉
from react-gallery-carousel.
Hi @a-tonchev !
I am pleased to report that I am getting there using useImperativeHandle
! I am going to make some examples and refactor the code!
from react-gallery-carousel.
@yifaneye wow thanks man, you are the best. There is no hurry, i still have a lot of work on other issues ;)
from react-gallery-carousel.
Related Issues (20)
- Invalid or unexpected token HOT 8
- Issues lazy loading images in gallery HOT 9
- How to use array of photos in carousel user managed slide ? HOT 1
- Allow thumbnails to be at the side HOT 4
- Carousel Button Titles HOT 2
- Typo: minIcon Typescript type is not accepted by Carousel Component HOT 5
- The component can't be used in a TS React project HOT 1
- Npm install doesnt work currently HOT 3
- npm install doesnt work on react-gallery-carousel/example/ HOT 3
- Cant make this module work HOT 4
- shouldMaximizeOnClick doesn't work HOT 2
- Add option for scroll bar for thumbnails HOT 3
- shouldSwipeOnMouse block onTap handler HOT 3
- Maximize and minimize using soft touch on trackpad HOT 5
- Transitions aren't working HOT 1
- Slides that have an a-tag inside them aren't clickable on mobile HOT 1
- Expose a prop to allow a custom placeholder image HOT 8
- Only show the first image HOT 4
- Pause on Hover HOT 2
- Pictures don't appear properly when sliding
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-gallery-carousel.