Bi-cycle

Bi-cycle assists in making infinite carousels and sliders by handling the index logic for you.

   

npm: npm i bi-cycle

Source: SketchedOut

Getting Started

Bi-cycle uses generators and provides an interface to modify the immutable index.

Note: Bi-cycle is more a proof of concept for not mutating values using generators, however you're more than welcome to use it in production.

import Bicycle from 'bi-cycle';

// ...

const { next, previous } = Bicycle({ start: 0, max: 5, infinite: true });

nextButton.addEventListener('click', next);
previousButton.addEventListener('click', previous);

There are handful of functions which can be destructured for modifying the state:

• next Moves either to the next index, or to min if at max;
• previous Moves either to the previous index, or to max if at min;
• first Moves to min;
• last Moves to max – by default Infinity;
• set(n) Sets slide denoted by n otherwise min or max if out of range;

You may also pass in additional parameters to Bicycle in order to override the defaults:

• start Determines the initial index value – default is min;
• min Determines the first index – default is -Infinity;
• max Determines the last index – default is Infinity;
• infinite Determines the action of Bi-cycle when the index is our of range – default is true;

Unique ID

Another use for Bi-cycle is a slightly over-elaborate unique ID generator – each and every time you invoke next a unique number is returned.

import Bicycle from 'bi-cycle';

const { next } = Bicycle();

const createModel = name => {
    return { id: next(), name };
};

createModel('Adam'); // { id: 1, name: 'Adam' }
createModel('Maria'); // { id: 2, name: 'Maria' }
createModel('Igba'); // { id: 3, name: 'Igba' }

Released under the MIT license.