DEV Community

Emiliano Bucci
Emiliano Bucci

Posted on

React spring carousel js

What I built

react-spring-carouse.js is a React carousel powered by react-spring and react-use-gesture.

App Link


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

Permissive License

MIT License


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 ->

The main technologies that power this carousel are react-spring and react-use-gesture.

Additional Resources/Info

Top comments (4)

unorthodev profile image
Mayowa Ojo

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

gabrielmlinassi profile image
Gabriel Linassi • Edited

I experimented with it and seems super easy to work with. However, I wonder if worths the size (~25K)

emilianobucci profile image
Emiliano Bucci • Edited

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! :)

gabrielmlinassi profile image
Gabriel Linassi

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.