npm package: @genips/raf
Description: Timers with requestAnimationFrame
Author: Stefan Verweij
Latest version: 1.1.6

# @genips/raf

[![fileSize](https://img.shields.io/bundlephobia/minzip/@genips/raf.svg)](https://img.shields.io/bundlephobia/minzip/@genips/raf.svg)
![Coverage](coverage/badge.svg)
[![build](https://img.shields.io/badge/build-passing-brightgreen.svg)](https://img.shields.io/badge/build-passing-brightgreen.svg)
[![type definitions](https://img.shields.io/npm/types/@genips/raf.svg)](https://img.shields.io/npm/types/@genips/raf.svg)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

### Installation:

`npm install @genips/raf`

or

`yarn add @genips/raf`

**Specific version**

`npm install @genips/raf@v1.1.3`

or

`yarn add @genips/raf@v1.1.3`

See tags for version numbers

### Importing:

Add the following line to your script

```typescript
import Raf from "@genips/raf";
```

Or add the folder to your webpack.config:

```javascript
resolve: {
    modulesDirectories: ["node_modules/@sycoraxya"];
}

// And add the following line to your scripts
import Raf from "genips-raf";
```

## Usage

genips-raf has 3 timers: [Now](#now), [Timeout](#timeout) and [Interval](#interval).

### Now

Use Now to perform an action in the next animationframe.

```typescript
import Raf from "@genips/raf";

Raf.now((rafInstance, elapsed) => {
    // Do stuff
});
```

### Timeout

Use Timeout to perform an action after given MS.

The second argument can be a number or a [Settings](#settings) object.

```typescript
import Raf from "@genips/raf";

Raf.timeout((rafInstance, elapsed) => {
    // Do stuff
}, 200);
```

### Interval

Use Interval to perform an action after given MS and repeat it.

The second argument can be a number or a [Settings](#settings) object.

```typescript
import Raf from "@genips/raf";

Raf.interval((rafInstance, elapsed) => {
    // Do stuff
}, 200);
```

### Using a Settings object

If you want to specify a tickFn, use a Settings object instead of a number as the second argument

**The tickFn includes the final tick**

```typescript
Raf.interval(
    (rafInstance, elapsed) => {
        // Do stuff after 200ms
    },
    {
        time: 200,
        tickFn: (rafInstance, elapsed) => {
            // Do stuff every tick
        },
    },
);
```

## Types

### Exported types

-   RafTimeout
-   RafInterval
-   RafNow

You can import these types like this:

```typescript
import Raf, { RafInterval } from "@genips/raf";

let interval: RafInterval;
```

### Callback

All callbacks are called with the following arguments:

| Argument    | Description                                                                     |
| ----------- | ------------------------------------------------------------------------------- |
| rafInstance | The instance of the raf timer that's created (RafNow, RafInterval, RafTimeout)  |
| elapsed     | **(number)** The amount of time in ms that has elapsed since the method started |

### Settings

A Settings object can be passed as the second argument instead of a number.

Settings can contain the following properties:

| Property | Required | Description                                                                  |
| -------- | -------- | ---------------------------------------------------------------------------- |
| time     | Yes      | **(number)** the time in MS                                                  |
| tickFn   | No       | **([Callback](#callback))** A function that gets called every animationframe |

### RafNow & RafTimeout

#### methods

| Method  | Description                                                        |
| ------- | ------------------------------------------------------------------ |
| pause   | Pauses the timer                                                   |
| resume  | Resumes the timer                                                  |
| stop    | Stops the timer                                                    |
| restart | Restarts the timer with the settings that were defined at creation |

#### properties

| Property | Type    | Description                                                        |
| -------- | ------- | ------------------------------------------------------------------ |
| paused   | boolean | Is the instance paused                                             |
| done     | boolean | Is the instance done                                               |
| progress | number  | The progress of the current iteration as a percentage              |
| elapsed  | number  | How much time has elapsed since the start of the current iteration |

### RafInterval

RafInterval inherits all methods and properties from RafNow and adds the following:

#### properties

| Property  | Description                                             |
| --------- | ------------------------------------------------------- |
| iteration | **(number)** The iteration of the interval. Starts at 1 |