RSCJS - React Spring Carousel JS

Overview

React-spring-carousel-js is a new way of intend the carousel experience in the web. It embraces the philosophy of Headless UI, which means that it's up to the developer to decide how it will look, while the library will only care about the internal logic and the behavior of the carousel. The main source of ispiration was the excelent library of react-table.

The main goal of this library is to bring something fresh and performant that could give the sensation of being natural. That's why it was built on top of two new and exciting libraries: react-spring and react-use-gesture, in order to give something fast and mobile ready out of the box with zero config.

Another important goal for the library was to bring something performant as well as simple (i never like the idea of complex libraries that look ugly from the configuration perspective, with tons of properties both for styling and for behavior). As Lao Tzu once said - “Simplicity is the ultimate sophistication” and that's where this library aims to.

Last but not least, React-spring-carousel-js embraces the full power of the newest React technology, offering hooks and Context to create and manipulate the behavior of the carousel in any possible way.

Why

Many times happened to me that while i was investigating which library to implement a carousel i could use in my new project, i always had the feeling that it was a difficult thing to do - at least, more than i always thought it should've been.

Don't get me wrong, there're lots of good libraries out there, but still i didn't feel free regarding the implementation of the carousel at all. I always had the feeling that i was doing some kind of hack to make it work and fit inside my UI.

If freedom was the main goal that push me to wrote my own library, the animation result is the second one. I never like them, to be honest, having always the feeling that animations were some kind of fake and totally unnatural. Always feeling like something wasn't right, even if i couldn't tell exactly why.

With react-spring-carousel-js you're free to create and compose your own carousel without any kind of bounds (without having to override styles or adding weird class names, or some other kind of strange hack) and animations feel naturals and reals. They respond to user interaction like you've always expected to do.

Features

  • Extreemely performant: thanks to react-spring, you'll get a very performant results with smooth and natural transitions with zero config.
  • Custom events: use our custom events to intercept when things happen and take the experience to the next level!
  • Mobile first: You can swipe/drag with no config needed thanks to react-use-gesture.
  • Resizable: the carousel will automatically resize and adapt if the browser viewport change. Very useful when changing to landscape on mobile devices.
  • Fullscreen capable: we provide you the API to enter/exit from fullscreen mode! (thanks to screenful.js).
  • Headles UI: no more headaches trying to style the elements of the carousel. You decide every aspect of the elements of the carousel.
  • Totally composable: we give you the instruments (API) and you decide where to place all the elements of the carousel and how they will behave and interact.
  • Easy to configure: configure the carousel behavior is a piece of cake!

How to use it

At it's most basic, the carousel can be used like this:

1import { useSpringCarousel } from 'react-spring-carousel-js'
2
3const Component = () => {
4  const { carouselFragment } = useSpringCarousel({
5    items: [
6      {
7        id: 'item-1',
8        renderItem: <div>My item 1</div>,
9      },
10      {
11        id: 'item-2',
12        renderItem: <div>My item 2</div>,
13      }
14    ]
15  })
16
17  return (
18    <div>
19      {carouselFragment}
20    </div>
21  )
22}
23

Pretty simple, right? 😏

Of course this will generate a very raw component, composed just by the Carousel. Yes, you don't have the classic arrow buttons, or other fancy stuff you normally get out of the box in other libraries, but we'll get there. The main point here is to show you that the library will only take care of creating the basics components you need to make the carousel work, but how it will look and feel? Well, it's totally up to you 🤓

Ready to start? Let's go!

nextPremise