What I built
react-spring-carouse.js is a React carousel powered by react-spring and react-use-gesture.
App Link
https://react-spring-carousel-js.emilianobucci.com/
Description
react-spring-carouse.js is a new way of approach the implementation of a carousel. We give you the API, and you decide where to put the carousel elements and how interact with it. It embraces the philosophy of Headless UI (not 100% of course, but almost).
Link to Source Code
https://github.com/Emiliano-Bucci/react-spring-carousel-js
https://www.npmjs.com/package/react-spring-carousel-js
Permissive License
MIT License
Background
I decided to build this library - specifically following this new approach in carousel's world - because many times, while trying to implement a carousel in my site/app - i never felt totally free. I always had the feeling that i had to do some dirty hack to adapt the carousel to work in a decent way in my UI, and of course i never like that. I never like the idea of having to override stuff, or not being totally free of implement my own components in the way i needed to.
The second point was that animations never feel very natural, always having the feeling that something wasn't quite right, even if i wasn't able to tell specifically what.
How I built it
I had to admit, this is my first open source library :D I built it using the package of create-react-library -> https://www.npmjs.com/package/create-react-library.
The main technologies that power this carousel are react-spring and react-use-gesture.
Additional Resources/Info
https://www.react-spring.io/
https://use-gesture.netlify.app/
Top comments (4)
Awesome stuff! I just stumbled into this while I was looking for a headless carousel implementation because I was just tired of hacking around every library out there.
I love the fact that it just handles the logic and let's you style however you want. Amazing
I experimented with it and seems super easy to work with. However, I wonder if worths the size (~25K)
Hi, and thanks for your feedback! I totally agree with you about the size; part of it is because, at the moment, react-spring (with the latest version) isn't three-shakable, so when you bundle it, you pick everything. Still, I'll try to understand how can I reduce it.
Thanks again! :)
I did some more testing about other functionalities I was not using before and I guess it definitely worth it. Very simple to use, clean API, high performance and tested.