react-falcon

0.1.0 • Public • Published

react-falcon - Beware, this is a work in progress

Lightweight and fast carousel component.

Checkout the demo

Table of contents

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-falcon

Weekly Downloads

1

Version

0.1.0

License

none

Unpacked Size

324 kB

Total Files

26

Last publish

Collaborators

  • martynaskadisa