react-falcon

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>
)

export default App

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