react-falcon - Beware, this is a work in progress
Lightweight and fast carousel component.
Checkout the demo
Table of contents
- Installing
- Why create yet another carousel component?
- Examples
- Dependencies
- API
- Browser support
- Changelog
- Contributing
- Licence
Installing
npm install react-falcon
or
yarn add react-falcon
Why create yet another carousel component?
Most carousel implementations use initialization process with expensive DOM operations which causes them to slow down the performance of a website, especially when the carousel is mounting.
This carousel has no initialization process (besides React lifecycle) and only performs reads when absolutely necessary. Therefore, there can safely be many instances of this component.
In addition to that, react-falcon
uses windowing technique so it only
renders 3 slides at a time (no need to render what users can't see).
Examples
Checkout the demo
import React from 'react'import Carousel from 'react-falcon' const App = <Carousel> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </Carousel>
Dependencies
React is the only dependency for this component.
Browser support
This library depends on requestAnimationFrame
and performance.now
, so make sure your targets support them.
- Chrome
- Firefox
- IE
- Safari
Changelog
API
props
prop name | Required? | Default value | Notes |
---|---|---|---|
loop | no | false | Whether it should go to the first slide after the last one or vice versa |
animate | no | true | Whether it should animate transition when use let goes of the slide |
Contributing
Contributions are always welcome! Either in the issue section or as a PR.
Licence
MIT