# cycled

> Cycle through the items of an array

Latest version **2.0.0** (published 2021-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install cycled
pnpm add cycled
yarn add cycled
bun add cycled
```

## Health

**Score 28/100 (F)** — status: abandoned.

Positive: has types package; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2021-04-07 |
| First published | 2018-03-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/cycled) |
| Module format | ESM |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 7.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 240 |
| Author | Sindre Sorhus |
| Maintainers | sindresorhus |
| Keywords | cycle, cycled, iterable, iterables, array, item, next, previous, loop, repeat, value, values, iterator |

## Links

- npm: https://www.npmjs.com/package/cycled
- Repository: https://github.com/sindresorhus/cycled
- Homepage: https://github.com/sindresorhus/cycled#readme
- Issues: https://github.com/sindresorhus/cycled/issues
- Funding: https://github.com/sponsors/sindresorhus
- npm.io page: https://npm.io/package/cycled

## Recent versions

- 2.0.0 (latest) — 2021-04-07
- 1.2.0 — 2020-07-17
- 1.1.0 — 2019-04-09
- 1.0.0 — 2018-05-27
- 0.2.0 — 2018-03-29
- 0.1.1 — 2018-03-29
- 0.1.0 — 2018-03-28

## README

# cycled

> Cycle through the items of an array

This package can be useful for cycling through tabs, images of slideshows, etc.

## Install

```
$ npm install cycled
```

## Usage

```js
import Cycled from 'cycled';

const cycled = new Cycled([1, 2, 3]);

cycled.current();
//=> 1

cycled.next();
//=> 2

cycled.next();
//=> 3

cycled.next();
//=> 1

cycled.previous();
//=> 3
```

## API

### `cycled = new Cycled(array)`

Initiates an array subclass with the methods documented below. Since it's an array, you can use all the normal array methods on it.

#### array

Type: `Array`

The array to wrap.

### cycled

The instance is an iterable that will cycle through the array. It will cycle through the number of elements equaling the length of the array from the current index.

```js
import Cycled from 'cycled';

const numberCycle = new Cycled([1, 2, 3, 4, 5]);

console.log(...numberCycle);
//=> 1 2 3 4 5
```

#### current()

Returns the current item.

#### next()

Returns the next item.

#### previous()

Returns the previous item.

#### step(steps)

Returns the item by going the given amount of `steps` through the array. For example, calling `step(2)` is like calling `next()` twice. You go backward by specifying a negative number.

#### peek(steps)

Returns the item that is located in the given amount of `steps` through the array. For example, calling `peek(2)` would get the item 2 items after the current one. You go backward by specifying a negative number.

This method is similar to `.step()` but without changing the current item.

#### index

Get or set the current index.

#### indefinitely()

Returns an iterable that will cycle through the array indefinitely.

#### indefinitelyReversed()

Returns an iterable that will cycle through the array backward indefinitely.

## Example

Here we create a simple tab component that can have the active view set or go forward/backward through the tabs.

```js
import Cycled from 'cycled';

class TabComponent {
	#activeView;
	#views;

	constructor(views) {
		this.#activeView = views[0];
		this.#views = new Cycled(views);
	}

	setActiveView(view) {
		this.#activeView = view;
		this.#views.index = this.views.indexOf(view);
	}

	nextView() {
		setActiveView(this.#views.next());
	}

	previousView() {
		setActiveView(this.#views.previous());
	}
}

const tabs = new TabComponent([
	'Homepage',
	'Blog',
	'Projects',
	'Contact'
]);

// …

nextButton.addEventListener('click', () => {
	tabs.nextView();
});
```

---
_Source: https://npm.io/package/cycled · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._