Nuka Carousel: The React Carousel, Rethought and Refined

April 23, 2018

Nuka Carousel is a pure-React carousel component that can support any kind of component as children, including text and images. Nuka Carousel has no built-in design, so it can be styled to fit any app. The carousel navigation can be controlled with either a container component or your app’s state management, making it easy to incorporate into your build.

Nuka Carousel

All-new API for custom controls

Custom components can be added to eight zones along the edge of the carousel. By default, Nuka Carousel displays a previous and next button along with page indicators. The carousel component now has render props for all eight zones (top left, center left, bottom left, etc.) that pass control functions and state to your custom components. For example:

<Carousel renderCenterLeftControls={({ previousSlide }) => ( <button onClick={previousSlide}>Previous</button> )} >

Adaptive Height

Nuka Carousel now supports dynamic height, based on content. There are three optional modes set by a prop: first mode sets the height of the carousel based on the initial slide; max mode enumerates through all the slides and sets the height to the tallest slide; and current mode is dynamic and resizes the carousel based on the content of the current slide.

Nuka First Mode
Nuka Carousel Current Mode
Nuka Carousel Max Mode

Modern tooling and React patterns

Nuka Carousel is now built using Webpack 4, Babel 7, and React 16. Mixins and createReactClass have given way to React.Component and modern React patterns. In addition to CommonJS, Nuka Carousel now has ES module outputs for apps with supporting tooling (e.g., supporting tree shaking for slimmer builds in modern Webpack).

Getting Started

It's easy to integrate Nuka Carousel into any React app- just yarn add nuka-carousel. To learn more about Nuka Carousel’s API or contributing to Nuka Carousel, visit the GitHub page.

Related Posts

Ranked Choice Voting: The Mobile Challenge

November 19, 2024
While working on VoteHub, a mobile absentee ballot solution for U.S. elections, I was tasked with designing and prototyping an interface for a relatively new election contest type, rapidly gaining attention and adoption, called Ranked Choice Voting (RCV).

Empowering Users: Developing Accessible Mobile Apps using React Native

July 2, 2024
Robust technical accessibility strategies and best practices we implemented for a mobile voting application using React Native.

Seamless Transitions: From Native to React Native

June 4, 2024
React Native, developed by Meta, allows developers to use a single codebase to create apps that run on both iOS and Android