react-spring-universal-carousel
v1.1.0
Published
The world's first responsive carousel that can be server side rendered
Downloads
8
Readme
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
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!