DEV Community

loading...

React spring carousel js

Emiliano Bucci
・2 min read

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/

Discussion (4)

Collapse
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

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

Collapse
emilianobucci profile image
Emiliano Bucci Author • 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! :)

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