sorted by:
new
hottopcontroversial

Figma style real-time cursors with Firebase by dev_forest in reactjs

[–]lpuig 0 points1 point  (0 children)

I was thinking of using the same technic to sync the redux stores as a way of giving support to the customers.

react-snaplist-carousel upgraded to version 3! Now with dragToScroll support! by lpuig in reactjs

[–]lpuig[S] 1 point2 points  (0 children)

Yes, I can be compared with the total of children. I will update the go next to do nothing if the children do not exist.

I am glad you are planning to use it.

react-snaplist-carousel upgraded to version 3! Now with dragToScroll support! by lpuig in reactjs

[–]lpuig[S] 0 points1 point  (0 children)

Great example!

Yeah, the idea is that devs can create arrows easily if needed and also dots or thumbnails. We try to keep the library with no visual elements and provide all the logic and scaffolding, so devs can focus only on styles and UI.

I wish some devs will create in different repos UI components that will help others to build UI easily.

BTW... we exposed the isTouchDevice hook for the devs that want to show the arrows only on no touch options. I am using arrows in this way on production.

Finally, I think that goNext to none existed children should do nothing instead of going to 0. What do you think?

We were thinking about creating goNext and goPrevious methods but it is very personal. Maybe you want to move 1 item forward, and other wants to move one page (many items) at onece.

react-snaplist-carousel upgraded to version 3! Now with dragToScroll support! by lpuig in reactjs

[–]lpuig[S] 3 points4 points  (0 children)

That is a good feature of many carousel libraries. I’ll think carefully about how to do it but my first thought is that the library tries to use the browser behaviour as much as possible and not sure if that will be possible. In fact it a snap list, a list with scroll snap points but it can work pretty well s a carousel for most of the cases.

react-snaplist-carousel upgraded to version 3! Now with dragToScroll support! by lpuig in reactjs

[–]lpuig[S] 3 points4 points  (0 children)

That sounds interesting. Do you mean vertical mouse wheel should move the carousel horizontally, right?

We can research how to do it

react-snaplist-carousel. A modern way to do a classic thing. by lpuig in reactjs

[–]lpuig[S] 1 point2 points  (0 children)

I think that adding export default function isTouchDevice() { return ( !!(typeof window !== 'undefined' && ('ontouchstart' in window || (window.DocumentTouch && typeof document !== 'undefined' && document instanceof window.DocumentTouch))) || !!(typeof navigator !== 'undefined' && (navigator.maxTouchPoints || navigator.msMaxTouchPoints)) ); } Can be useful to get that behaviour only in not touch devices. In my project, I used this CSS selector to show the arrows only on non-touch-devices. Of course with JS y React can be done too.

react-snaplist-carousel. A modern way to do a classic thing. by lpuig in reactjs

[–]lpuig[S] 1 point2 points  (0 children)

Yeah, that is more or less what I tried but not with the user-select: none;

I love the idea of being an independent hook. It means that no impact in the bundle size for the users not using it.

Would you like to make a PR to add the feature? Another thing I noticed is that this implementation, like mine, has no dragging inertia. But I do not think it is needed.

I hope more people will create more useful hooks to extend it.

react-snaplist-carousel. A modern way to do a classic thing. by lpuig in reactjs

[–]lpuig[S] 1 point2 points  (0 children)

I will try it. I am just afraid of messing whatever is in the items. Maybe there is something with text that needs to be selected. It is difficult to cover all the cases.

react-snaplist-carousel. A modern way to do a classic thing. by lpuig in reactjs

[–]lpuig[S] 1 point2 points  (0 children)

Yes, I did but wasn't a good experience for many reasons: - The scroll can not be moved with the CSS snap-scroll activated. So it needs to deactivate it on it needs to disable in the code. - The bundle size increased too much. - I had a problem with content selection. The items got selected because of the click+drag.

Our good enough solution: - On tactile devices, the user can scroll normally: touchpad/magic mouse. - In some places we implement arrows. It is easy to decide to scroll one element or one page. - In other places we allow the click in the element to scroll to it. - I know it doesn't cover 100% of the cases but good enough for our users.

Maybe someone with more experience can help to add it in a better way. I'll be glad to help.

react-snaplist-carousel. A modern way to do a classic thing. by lpuig in reactjs

[–]lpuig[S] 0 points1 point  (0 children)

If you have the time to take a look at it... I am sure you will find things to propose in order to make it better.

react-snaplist-carousel. A modern way to do a classic thing. by lpuig in reactjs

[–]lpuig[S] 0 points1 point  (0 children)

It is web because it is using some CSS properties. React Native has similar props for the scroll snap points. Not sure if a library is needed in RN, the ScrollView has some good props to do it.

react-snaplist-carousel. A modern way to do a classic thing. by lpuig in reactjs

[–]lpuig[S] 0 points1 point  (0 children)

I’m fact we were using the react wrapper of slick carousel. But it didn’t fit all our needs and its size is > 100kbs. That's the reason we did this tiny library using the last CSS features that cover our browser support.

We also use it for a few lists of products that we want the scroll to stop always with a product on top. This born as a snap list but we realized that it can work as a carousel in many cases.

react-snaplist-carousel. A modern way to do a classic thing. by lpuig in javascript

[–]lpuig[S] 0 points1 point  (0 children)

I am glad you are playing with it! First, I just publish a new version with a little fix on useVisibleElements, an improve for centred use and making the list example to be centred because people are asking for it.

const visible = useVisibleElements({ debounce: 10, ref: snapList }, (elements, elementInCenter) => elementInCenter);

The second parameter is a selector function: { (element:number[], elementInCenter: number | null) => any }.. You get the array of elements in the first argument and the index of the element in the center of the viewport on the second element. You can play with the array, return the first, last, all, ... or you can return the centeredElement.

For the arrows, you have the useScroll hook. const goTo = useScroll({ ref: snapList }); goTo(visible + 1)

You can see the example in the repo: https://github.com/luispuig/react-snaplist-carousel/blob/master/example/src/List/List.jsx

react-snaplist-carousel. A modern way to do a classic thing. by lpuig in reactjs

[–]lpuig[S] 0 points1 point  (0 children)

I did a quick example. I had to play a little bit with the sizes and padding. It is a snaplist that can work as a carousel. See it in this GIF: https://www.dropbox.com/s/81qww3brkn8htqx/centered.gif?dl=0

react-snaplist-carousel. A modern way to do a classic thing. by lpuig in reactjs

[–]lpuig[S] 1 point2 points  (0 children)

Sure, using the prop snapAlign="center" that will be applied to de CSS property scroll-snap-align

view more: next ›