react-spring-universal-carousel

react-spring-universal-carousel

Introduction

This is a no-frills carousel that can be server side rendered. If you happen upon another reach carousel component that can be server side rendered without any "layout shift" please let us know (open an issue), and we will add a comparison to it.

// TODO: comparison matrix with nuka-carousel and others

Also it uses react-spring for silky smooth drag animations. Furthermore, if you are already using react-spring, then the incremental weight of this library is negligible.

// TODO: library size comparison when react-spring is an existing dependency and not.

Examples

• With bootstrap
• With styled-jsx

Both of these examples use NextJS for easy server side rendering.

Quick Start

Inside your React project directory, run the following:

yarn add react-spring-universal-carousel

Or with npm:

npm install react-spring-universal-carousel

Carousel

NOTE: It is well-advised to first style your carousel without the Carousel component. Wrap your row of items in a div with overflow: scroll to see that it behaves.

<div style={{ overflowX: 'scroll'}}>
  <Row />
</div>

Once you've done that, just replace the wrapping div with the Carousel component:

import Carousel from 'react-spring-universal-carousel'
 
function Page() {
  return (
    <Carousel>
      <Row />
    </Carousel>
  )
}

That's all there is to it. Holler if you have questions or encounter bugs!