React Awesome Slider

React Awesome Slider is a 60fps React slider/carousel component for media and content transitions, created by Rafael Caferati and published as the npm package @rcaferati/react-awesome-slider under the MIT license. It renders slides from either React children or a media array, and ships with optional higher-order components for autoplay, captioned images, and animated lettering, plus fullpage navigation utilities for single-page applications. The library is designed for React 18 and newer, and its repository also documents use with Next.js and Gatsby.

What is React Awesome Slider?

React Awesome Slider is a React component that displays a set of slides as an animated slider or carousel. It accepts slides as React children using data-src attributes or as a media array of objects carrying source and optional slug fields, and outputs a navigable, swipeable slider with configurable transition animations. The component runs on React 18 or newer, with react-dom >= 18 as a peer dependency, and the project is maintained by Rafael Caferati on GitHub.

Key Features

• 60fps animations — Transition animations are designed to run at 60 frames per second, keeping slide changes smooth on desktop and mobile.
• Modular animation recipes — Includes a default sideAnimation plus five extra animation stylesheets: cubeAnimation, fallAnimation, foldOutAnimation, openAnimation, and scaleOutAnimation, each imported as its own CSS file.
• CSS variable theming — The core stylesheet exposes custom properties on the slider root, such as --organic-arrow-color, --control-bullet-color, and --content-background-color, overrideable inline through the style prop.
• CSS Modules support — The cssModule prop accepts a module map or an array of maps, allowing bundlers to map class names while the corresponding .css files are still imported for side effects.
• Touch and swipe navigation — The mobileTouch prop (on by default) enables swipe gestures on touch devices, with next/previous buttons and clickable bullets as fallbacks.
• Autoplay HOC — withAutoplay wraps the slider and adds play, cancelOnInteraction, and interval props to rotate slides automatically.
• Captioned images HOC — withCaptionedImages consumes a screens array of media, caption, and backgroundColor objects and overlays captions on slides.
• Fullpage navigation utilities — The navigation subpath exports Provider, Link, withNavigationHandlers, and withNavigationContext to keep slider selection in sync with URL routes in SPAs.
• Event callbacks — Exposes onFirstMount, onTransitionStart, onTransitionEnd, onTransitionRequest, and onTransitionReject, each receiving a getInfo() payload with slides, currentIndex, currentMedia, currentSlide, and element.

Who is it for?

• React developers building media galleries — Use media or children modes to display images or custom content in a swipeable slider without writing transition logic from scratch.
• Next.js and Gatsby sites — The library is built for React-based static sites and includes a fillParent prop for fullscreen, fullpage transitions in hero sections.
• Marketers and content editors — The captioned images HOC lets non-technical teams build slide decks by supplying image URLs, captions, and background colors.
• SPA and immersive experience developers — The navigation utilities enable "slides-as-routes" patterns where each slide corresponds to a URL path.

What can you do with React Awesome Slider?

• Product pages: present product shots in a carousel with autoplay and swipe, matching brand colors with CSS variables.
• Portfolio sites: use fullpage navigation to create a non-scrolling one-page site where arrow keys or links navigate between project slides.
• Presentation-style content: use the animated lettering HOC to split a screen into animated paragraph lines that transition on slide changes.
• Image galleries: feed the media array with preloaded images and use the onLoadStart hook for custom preload behavior.

FAQ

Is React Awesome Slider free?

Yes, it is open source under the MIT license, and the npm package can be used in commercial and personal projects without a paid license.

What React versions are required?

The package lists react >= 18 and react-dom >= 18 as peer dependencies, so it requires React 18 or newer.

How do I use captions on slides?

Import withCaptionedImages from the captioned subpath and pass a screens array where each item includes media, caption, and optionally backgroundColor. The HOC overlays the caption text on the slide.

Does it support touch devices?

Yes, the mobileTouch prop is enabled by default and the slider responds to swipe gestures on touch screens. It can be disabled by setting the mobileTouch prop to false.

How do I customize the colors?

The recommended way is to override CSS variables passed through the style prop on the slider root, such as --organic-arrow-color, --control-bullet-color, and --content-background-color. Additional built-in animations require importing their own CSS file.