bearing ·

A lightweight carousel for React, which is:

Pretty: It's minimalistic yet good enough for use. You can always extend it as you wish
Simple: It's not heavy, working fine and tested with Mocha
Quick: A single drop-in component with the rest under the hood

Installation

You can add bearing from npm with

npm install bearing

yarn add bearing

Documentation

The package contains:

bearing - main component used in app
bearing/easings - optional library of named animation easing functions

Basics

Here is the basic usage example of carousel component:

import Bearing from "bearing";
import { easeInOutSine } from 'bearing/easing';

const props = {
  slides: [
    'http://example.com/image0.png',
    ...
  ],
  size: {
    width: 1000,
    height: 500
  },
  animation: {
    timing: easeInOutSine,
    speed: 500,
    interval: 2000
  }
};

export default function App() {
  return <Bearing {...props} />;
};

Props usage pattern:

size
- width - sets width of slide (not the width of carousel frame)
- height - same here
animation
- timing - easing function bound to animation cycle time
- speed - animation speed scaling
- interval - optional parameter, omit if manual cycling preferred

Easing

Instead of bearing/easing functions, you can pass custom animation easing with timing prop:

const props = {
  animation: {
    timing: (x: number) => x,
  },
};

Examples

You can use codesandbox or bearing-home repo as a reference point for your app

Contributing

Issues

In case you encounter bugs or would like to propose a feature, feel free to raise an issue or open a pull request. Consider next rules as you do so:

Sign commits with valid personal key, you can read more about it in GitHub Docs
When raising issue about bug, please attach a link to your codesandbox sample

rosingrind/bearing