open-index/open-npm huggingface dataset:
npm package: @okfetch/logger
Description: A pino-based logging plugin for okfetch request lifecycles.
Latest version: 0.3.1

# @okfetch/logger

`@okfetch/logger` is a small `pino`-powered plugin for okfetch request lifecycles.

It gives you a ready-made `OkfetchPlugin` that logs:

- outbound requests
- successful responses
- failures
- retries

Use it when you want sensible request logging without writing your own plugin from scratch.

## Installation

```bash
bun add @okfetch/logger @okfetch/fetch pino
```

```bash
npm install @okfetch/logger @okfetch/fetch pino
```

## Usage

```ts
import { okfetch } from "@okfetch/fetch";
import { logger } from "@okfetch/logger";

const result = await okfetch("https://example.com/health", {
  plugins: [
    logger({
      logDataOnSuccess: true,
    }),
  ],
});
```

## API

`logger(options?)`

Options:

- `logDataOnSuccess?: boolean`
- `pinoOptions?: pino.LoggerOptions`

When `logDataOnSuccess` is `true`, the plugin logs the parsed success payload in addition to the response status.

## What It Logs

Hook coverage:

- `onRequest`
- `onSuccess`
- `onFail`
- `onRetry`

Example log flow:

- request started
- request succeeded with status
- or request failed with tagged error
- or request is being retried

## Relationship To `@okfetch/fetch`

This package is just a plugin built on top of the public `OkfetchPlugin` interface from `@okfetch/fetch`.

If you need custom log formatting, request correlation, redaction, or tracing metadata, you can use this package as-is or as a starting point for your own plugin.
npm package: @okhi/okcollect-manager-react-native
Description: To be documented...
Author: Julius Kiano
Latest version: 1.2.2
Deprecated: This library is no longer being maintained. Please use @okhi/okcollect-web-react-native instead. For more information, visit docs.okhi.co

# @okhi/okcollect-manager-react-native

To be documented...
npm package: @okhi/okcollect-verify-react-native
Description: To be documented...
Author: Julius Kiano
Latest version: 1.0.6
Deprecated: This library is no longer being maintained. Please use @okhi/okverify-mobile-react-native instead. For more information, visit docs.okhi.co

# @okhi/okcollect-verify-react-native

To be documented...
npm package: @okhi/okcollect-web-react-native
Description: - [Getting started](https://docs.okhi.co/v/v5.0-alpha/integrating-okhi/okhi-on-your-react-native-app)
Author: Julius Kiano
Latest version: 1.2.4

# @okhi/okcollect-web-react-native

- [Getting started](https://docs.okhi.co/v/v5.0-alpha/integrating-okhi/okhi-on-your-react-native-app)
npm package: @okhi/okverify-mobile-react-native
Description: - [Getting Started](https://docs.okhi.co/v/v5.0-alpha/integrating-okhi/okhi-on-your-react-native-app)
Author: Julius Kiano
Latest version: 1.2.0

# @okhi/okverify-mobile-react-native

- [Getting Started](https://docs.okhi.co/v/v5.0-alpha/integrating-okhi/okhi-on-your-react-native-app)
npm package: @okhi/react-native-background-geofencing
Description: A reliable React Native Geofencing library, that works in the background and survives device restarts
Author: OkHi
Latest version: 1.5.0

# React Native Background Geofencing

A reliable React Native geofencing library, that works in the background and survives device restarts.

**WARNING: Currently only supports Android devices. Plans for iOS are underway**

## Getting started

`$ yarn add react-native-background-geofencing`

### Android

#### Mostly automatic installation (for RN < 0.60)

`$ react-native link react-native-background-geofencing`

#### Permissions

Add the following permissions to your `AndroidManifest.xml`

```xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/>
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.WAKE_LOCK" />

</manifest>
```

## Usage

#### 1. Create an async JavaScript task file that will handle Geofence events

`$ touch myTask.js`

#### 2. Place the following code inside `myTask.js`

The task will be executed in the background even after the device restarts.

```javascript
import {RNGeofenceEvent} from 'react-native-background-geofencing';
export default async function myTask({event, data}) {
  // handle Geofence updates here
  if (event === RNGeofenceEvent.ENTER) {
    console.log(`welcome to ${data.lat},${data.lng}`);
  }
  if (event === RNGeofenceEvent.ERROR) {
    console.log(`Opps, something went wrong: ${data.errorMessage}`);
  }
}
```

### 3. Configure your JavaScript task and/or webhook

Add the following in your app's `index.js` file.

```javascript
import {AppRegistry} from 'react-native';
import {
  configureJSTask,
  configureWebhook,
} from 'react-native-background-geofencing';
import App from './App';
import myTask from './myTask.js';

configureJSTask({
  task: myTask,
  // Required to enable your task to run as an Android foreground service
  notification: {
    title: "Don't mind me",
    text: "I'm just a notification",
  },
});

// If you'd like to ship the events to a server use this.
// Its guaranteed to run when the device has an internet connection using Android's Work manager API

configureWebhook({
  url: 'https://myapi.com/geofences',
  headers: {
    foo: 'Bar',
  },
});

AppRegistry.registerComponent(appName, () => App);
```

### 4. Add / Remove Geofences

```javascript
import RNBackgroundGeofencing from 'react-native-background-geofencing';

const geofence = {
  id: 'mygeofence',
  lat: -1.29273,
  lng: 36.820389,
};

await RNBackgroundGeofencing.add(geofence);

await RNBackgroundGeofencing.remove(geofence.id);
```

## Contributions

Are welcomed ♥️ especially those specifically addressing iOS support and bug fixes.
npm package: @okhi/react-native-core
Description: Core package for the OkHi react native suite of libraries
Author: OkHi
Latest version: 1.3.2

# @okhi/react-native-core

Core package for the OkHi react native suite of libraries

## Installation

```sh
npm install @okhi/react-native-core
```

## Usage

```js
import {
  isGooglePlayServicesAvailable,
  isLocationPermissionGranted,
  isLocationServicesEnabled,
  requestEnableGooglePlayServices,
  requestEnableLocationServices,
  requestLocationPermission,
  isBackgroundLocationPermissionGranted,
  requestBackgroundLocationPermission,
} from '@okhi/react-native-core';

async function checkPermissions() {
  if (!(await isGooglePlayServicesAvailable())) {
    await requestEnableGooglePlayServices(); // resolves true | false
  }

  if (!(await isLocationPermissionGranted())) {
    await requestLocationPermission(); // resolves true | false
  }

  if (!(await isLocationServicesEnabled())) {
    await requestEnableLocationServices(); // resolves true | false
  }

  if (!(await isBackgroundLocationPermissionGranted())) {
    await requestBackgroundLocationPermission(); // resolves true | false
  }
}
```

## Documentation

- [Guides](https://docs.okhi.co/v/v5.0-alpha/okhi-on-your-react-native-app)

- [Best Practices](https://docs.google.com/document/d/1kxolQJ4n6tEgReuqVLYpDVMW--xvqv5UQ7AdvrN0Uw0)

- [API Reference](https://okhi.github.io/react-native-core/)

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @okhi/react-native-okcollect
Description: The OkCollect React Native library enables you to launch OkHi from your app and collect accurate addresses from your users.
Author: OkHi
Latest version: 1.3.3

# @okhi/react-native-okcollect

The OkCollect React Native library enables you to launch OkHi from your app and collect accurate addresses from your users.

## Prerequisite libraries

- [@okhi/react-native-core](https://github.com/OkHi/react-native-core#okhireact-native-core)

## Installation

```sh
npm install @okhi/react-native-okcollect
```

## Usage

```js
import React, { useState } from 'react';
import { Button } from 'react-native';
import {
  OkHiException,
  OkHiUser,
  requestLocationPermission,
} from '@okhi/react-native-core';
import OkHiLocationManager, {
  OkCollectSuccessResponse,
} from '@okhi/react-native-okcollect';

function App() {
  const [launch, setLaunch] = React.useState(false);

  useEffect(() => {
    // location permission is required to enable users to create
    // addresses at their current location
    async function requestPermission() {
      await requestLocationPermission({
        message:
          'Hey, we need permissions to enable you create addresses at your current location',
        title: 'Location permission required',
        buttonPositive: 'Grant',
      });
    }
    requestPermission();
  }, []);

  const user: OkHiUser = {
    firstName: 'Bob',
    lastName: 'Mark',
    phone: '+254712345678', // Make sure its in MSISDN standard format
  };

  const handleOnSuccess = async (response: OkCollectSuccessResponse) => {
    setLaunch(false);
    // perform any logic you'd wish with user and location objects
    const { user, location } = response;
  };

  const handleOnError = (error: OkHiException) => {
    setLaunch(false);
    console.log(error.code);
    console.log(error.message);
  };

  // called when user taps on the top right close button
  const handleOnCloseRequest = () => {
    setLaunch(false);
  };

  return (
    <View style={{ flex: 1 }}>
      <Button onPress={() => setLaunch(true)} title="Start Verification" />
      <OkHiLocationManager
        user={user}
        onSuccess={handleOnSuccess}
        onError={handleOnError}
        onCloseRequest={handleOnCloseRequest}
        launch={launch}
      />
    </View>
  );
}
```

## Documentation

- [Guides](https://docs.okhi.co/v/v5.0-alpha/okhi-on-your-react-native-app)

- [Best Practices](https://docs.google.com/document/d/1kxolQJ4n6tEgReuqVLYpDVMW--xvqv5UQ7AdvrN0Uw0)

- [API Reference](https://okhi.github.io/react-native-okcollect/)

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @okiba/arrays
Description: Array helpers for okiba.js
Latest version: 1.0.25



# Okiba / arrays
Array utils for okiba js

__



### Installation

```bash
npm i --save @okiba/arrays
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/arrays/index.js"></script>
```

## Usage

```javascript
import arrays from '@okiba/arrays'
```

#### Untranspiled code 🛑
Okiba Core packages are not transpiled, so _don't forget to transpile them with your favourite bundler_.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```







## arrayOrOne(arrayLike)


Return the first element if it only contains one






```javascript
const els = arrayOrOne([🍏, 🍌])
console.log(els) // [🍏, 🍌]

const els = arrayOrOne([🍏])
console.log(els) // 🍏
```




#### Arguments


##### + `arrayLike`: `Array-like`

The options object.





#### Returns

`any` The first element or the argument, undefined if empty array
## castArray(castable)


Cast an array-like object or single element to Array






```javascript
const elements = castArray(document.querySelectorAll('p')) // [p, p]
const fruits = castArray(🍒) // [🍒]
```




#### Arguments


##### + `castable`: `any`

Array to cast





#### Returns

`Array` The array-like converted to Array, or an Array containing the element
## spliceOne(array, index)


Removes an element from an array in-place without causing Garbage Collection






```javascript
const array = [🍎, 🍐, 🍌]
spliceOne(array, 1)
console.log(array) // Logs: [🍎, 🍌]
```




#### Arguments


##### + `array`: `Array`

Array you want to remove an element from


##### + `index`: `Number`

The index of the element to remove
npm package: @okiba/class-utils
Description: Utilities that operate on classes
Latest version: 1.0.25



# Okiba / class-utils
Utilities that operate on classes

__



### Installation

```bash
npm i --save @okiba/class-utils
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/class-utils/index.js"></script>
```

## Usage

```javascript
import class-utils from '@okiba/class-utils'
```

#### Untranspiled code 🛑
Okiba Core packages are not transpiled, so _don't forget to transpile them with your favourite bundler_.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```







## mixin(BaseClass, context, Arguments)


Mixes properties and methods from a class into a given `this` context






```javascript
class Fruit {
  constructor() {
    this.isPeeled = false
  }

  peel() {
    this.isPeeled = true
  }
}

class Coloured {
  constructor(color) {
    this.color = color
  }
}

class Edible {
  constructor(color) {
    mixin(Fruit, this)
    mixin(Coloured, this, color)
  }
}

const edible = new Edible('red')
edible.peel()
console.log(edible.isPeeled, edible.color)
// Logs: true, 'red'
```




#### Arguments


##### + `BaseClass`: `Class`

The class definition to mix-in


##### + `context`: `Object`

The context that has to include methods and props


##### + `Arguments`: `any`

to pass to the BaseClass constructor
npm package: @okiba/cursor
Description: A handler for custom html cursor
Latest version: 1.1.1



# Okiba / Cursor
A base component aimed to handle a custom html cursor




```javascript
import Cursor from '@okiba/cursor'

const cursor = new Cursor({
 el: document.getElementById('my-custom-cursor'),
 options: {
   inertia: 0.25
 }
})
```



### Installation

```bash
npm i --save @okiba/cursor
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/cursor/index.js"></script>
```

## Usage

```javascript
import Cursor from '@okiba/cursor'
```

#### Untranspiled code 🛑
Okiba UI packages are not transpiled, so __don't forget to transpile them with your favourite bundler__.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:
```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```







## constructor(props)









#### Arguments


##### + `props`: `Object`







## setup()


Sets cursor base styles (can be extended/overwritten)







## show()


Reveals cursor (can be extended)







## hide()


Unveils cursor (can be extended)







## move(inertia)


Animates cursor to pointer position (can be overwritten)







#### Arguments


##### + `inertia`: `Number`

The lerping factor





## hover(matchedSelector)


Handles hover event







#### Arguments


##### + `matchedSelector`: `Object`

The trigger selector





## reset()


Restores the cursor default state (should be implemented)







## onPointerInView(payload)


Handles pointer entering/leaving viewport callback







#### Arguments


##### + `payload`: `Object`

The pointer inview event payload





## onPointerMove(payload)


Updates cursor position







#### Arguments


##### + `payload`: `Object`

The pointermove event payload





## onPointerOver(e)


Handles pointer hover







#### Arguments


##### + `e`: `Event`

The mouseover/touchmove event





## onPointerDown()


Handles pointer down







## onPointerUp()


Handles pointer up







## onRAF()


Handles request animation frame







## onResize()


Handles resize







## listen()


Initializes listeners (can be extended)







## onDestroy()


Kills listeners (can be extended)







## defaultTriggers()


Default triggers selectors
npm package: @okiba/detect
Description: Feature detection
Latest version: 1.0.9



# Okiba / detect
Utilities to check some browser features




### Installation

```bash
npm i --save @okiba/detect
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/detect/index.js"></script>
```

## Usage

```javascript
import detect from '@okiba/detect'
```

#### Untranspiled code 🛑
Okiba UI packages are not transpiled, so __don't forget to transpile them with your favourite bundler__.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:
```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```







## hasPassiveEvents()


Check if browser supports passive events






```javascript
import {hasPassiveEvents} from '@okiba/detect'

console.log(hasPassiveEvents) // true
```




#### Returns

`Boolean` true if browser supports passive events
## hasTouch()


Check if browser has touch support






```javascript
import {hasTouch} from '@okiba/detect'

console.log(hasTouch) // true
```




#### Returns

`Boolean` true if browser has touch support
npm package: @okiba/drag-emitter
Description: Unified drag events emitter for mouse and touch
Latest version: 0.2.17



# Okiba / DragEmitter
Emits drag events for all common pointers kinds (touch & mouse)

__



### Installation

```bash
npm i --save @okiba/drag-emitter
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/drag-emitter/index.js"></script>
```

## Usage

```javascript
import DragEmitter from '@okiba/drag-emitter'
```

#### Untranspiled code 🛑
Okiba Core packages are not transpiled, so _don't forget to transpile them with your favourite bundler_.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```







## constructor(el)








```javascript
import {DragEmitter} from '@okiba/drag-emitter'
import {qs} from '@okiba/dom'

const dragEmitter = new DragEmitter(qs('.container'))
dragEmitter.on(
  'drag',
  ({deltaX, clientX, deltaY, clientY}) => {
    console.log(deltaX, clientX, deltaY, clientY)
  }
```




#### Arguments


##### + `el`: `Element`

Element whose surface is used for drag events





## destroy()


Unbinds events from the element and deletes the reference.
To be called when the instance is not needed anymore for cleanup.
npm package: @okiba/easings
Description: Easings functions used in okiba.js
Latest version: 1.0.25



# Okiba / easings
Collection of easings to alter a value

__



```javascript
import {easeInQuad} from '@okiba/easings'
const easedProgress = easeInQuad(progress)
```



### Installation

```bash
npm i --save @okiba/easings
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/easings/index.js"></script>
```

## Usage

```javascript
import easings from '@okiba/easings'
```

#### Untranspiled code 🛑
Okiba Core packages are not transpiled, so _don't forget to transpile them with your favourite bundler_.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```
npm package: @okiba/eslint-config
Description: Eslint config used in okiba.js
Latest version: 0.0.6
Deprecated: moved to eslint-config-okiba-gang



# Okiba // 





### Installation
```
npm i --save @okiba/
```




## "no-shadow"()


Variables







## "no-cond-assign"()


Possible errors







## "consistent-return"()


Best practices







## indent()


Style
npm package: @okiba/event-emitter
Description: Simple Event Emitter okiba.js
Latest version: 1.1.17



# Okiba / EventEmitter
Emits events that can be listened and unlistened to. Allows for a catch-all event which is always triggered.

__



```javascript
import EventEmitter from '@okiba/event-emitter'
const emitter = new EventEmitter
emitter.on('log', console.log)
emitter.emit('log', 'Silence is deprecated')
// Logs: 'Silence is deprecated'

emitter.off('log', console.log)
emitter.emit('log', 'Will not run')
// ...Nothing happens
```



### Installation

```bash
npm i --save @okiba/event-emitter
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/event-emitter/index.js"></script>
```

## Usage

```javascript
import EventEmitter from '@okiba/event-emitter'
```

#### Untranspiled code 🛑
Okiba Core packages are not transpiled, so _don't forget to transpile them with your favourite bundler_.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```







## on(name, handler)


Sets an event listener for an event type







#### Arguments


##### + `name`: `String`

Event type


##### + `handler`: `function`

Callback to be fired when that event occours





## off(name, handler)


Unsets an event listener for an event type







#### Arguments


##### + `name`: `String`

Event type


##### + `handler`: `function`

Callback previously registered for that event type





## emit(name, data)


Triggers an event with optional data attached.
All listeners will be triggered in registration order.
Custom data will be passed to them as a parameter







#### Arguments


##### + `name`: `String`

Event type


##### + `data`: `Object` | _optional_

Custom data to be passed to the handlers





## hasListeners(type)


Checks if the given event has at least one registered callback







#### Arguments


##### + `type`: `String`

The event type





## destroy()


Removes all event listeners and deletes the handlers object
npm package: @okiba/event-manager
Description: Centralized event management
Latest version: 2.1.1



# Okiba / EventManager
A custom events management system




### Installation

```bash
npm i --save @okiba/event-manager
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/event-manager/index.js"></script>
```

## Usage

```javascript
import EventManager from '@okiba/event-manager'
```

#### Untranspiled code 🛑
Okiba UI packages are not transpiled, so __don't forget to transpile them with your favourite bundler__.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:
```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```


### Submodules:

#### [EventManager]()
A singleton to manage centralized event listeners

###### [`subscribedEvents`](), [`hasListeners`](), [`subscribe`](), [`unsubscribe`](), [`update`](), [`on`](), [`off`](), [`emit`](), [`clear`](), [`destroy`]()


#### [AbstractHandler]()
A base class that defines a global event handler interface

###### [`module:AbstractHandler`](), [`eventCallback`](), [`listen`](), [`unlisten`](), [`dispatch`]()


#### [EventHandler]()
An handler class aimed to centralize a native browser event listener

###### [`listen`](), [`unlisten`](), [`dispatch`]()


#### [RAFHandler]()
An handler class aimed to centralize a requestAnimationFrame

###### [`nextFrame`](), [`listen`](), [`unlisten`]()
npm package: @okiba/evented-component
Description: Component with events
Latest version: 2.0.10



# Okiba / EventedComponent
A component that has events.
Extends [Component](https://github.com/okiba-gang/okiba/tree/master/packages/component) and
composes with [EventEmitter](https://github.com/okiba-gang/okiba/tree/master/packages/event-emitter),
inerithing both's method sets.

__



```javascript
// FetchButton.js

import EventedComponent from '@okiba/evented-component'
import {on, off} from '@okiba/dom'

class FetchButton extends EventedComponent {
  constructor(args) {
    super(args)

    this.onClick = this.onClick.bind(this)
    on(this.el, 'click', this.onClick)
  }

  onClick() {
    fetch('/api')
      .then(data => this.emit('update', data))
  }

  onDestroy() {
    off(this.el, 'click', this.onClick)
  }
}
```

```javascript
// UIPiece.js

import Component from '@okiba/component'

const components = {
  fetchButton: {selector: '.fetch-button', type: FetchButton}
}

class UIPiece extends Component {
  constructor({el, options}) {
    super({el, ui, components, options})

    this.components.fetchButton.on(
      'update', this.update
    )
  }

  onDestroy() {
    this.components.fetchButton.off(
      'update', this.update
    )
  }
}
```



### Installation

```bash
npm i --save @okiba/evented-component
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/evented-component/index.js"></script>
```

## Usage

```javascript
import EventedComponent from '@okiba/evented-component'
```

#### Untranspiled code 🛑
Okiba Core packages are not transpiled, so _don't forget to transpile them with your favourite bundler_.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```







## on()







#### See: [EventEmitter::on](https://github.com/okiba-gang/okiba/tree/master/packages/event-emitter#emitname-data)







## off()







#### See: [EventEmitter::off](https://github.com/okiba-gang/okiba/tree/master/packages/event-emitter##offname-handler)







## emit()







#### See: [EventEmitter::emit](https://github.com/okiba-gang/okiba/tree/master/packages/event-emitter#emitname-data)







## destroy()







#### See: [Component](https://github.com/okiba-gang/okiba/tree/master/packages/component#destroy)
npm package: @okiba/functions
Description: Utility helpers for okiba.js
Latest version: 1.0.8



# Okiba / functions
A collection of contextless utility functions

__



### Installation

```bash
npm i --save @okiba/functions
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/functions/index.js"></script>
```

## Usage

```javascript
import functions from '@okiba/functions'
```

#### Untranspiled code 🛑
Okiba Core packages are not transpiled, so _don't forget to transpile them with your favourite bundler_.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```







## debounce(callback, latency, timer)


Callback debounce helper.
Returns a debounced version of provided callback






```javascript
import {debounce} from '@okiba/functions'

const onResize = () => console.log('window resized')
window.addEventListener('resize', debounce(onResize, 300))
```




#### Arguments


##### + `callback`: `function`

The callback to be debounced


##### + `latency`: `Number`

The debounce delay time


##### + `timer`: `Number`

The timer id





#### Returns

`function` The debounced version of original callback
npm package: @okiba/math
Description: Math functions used in okiba.js
Latest version: 1.0.26



# Okiba / math
Collection of math functions

__



### Installation

```bash
npm i --save @okiba/math
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/math/index.js"></script>
```

## Usage

```javascript
import math from '@okiba/math'
```

#### Untranspiled code 🛑
Okiba Core packages are not transpiled, so _don't forget to transpile them with your favourite bundler_.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```







## lerp(min, max, fraction)


Linear interpolation between a two values






```javascript
import {lerp} from '@okiba/math'
const xPosition = lerp(0, 100, 0.5)
console.log(xPosition) // 50
```




#### Arguments


##### + `min`: `Number`

Minimum possible value


##### + `max`: `Number`

Maximum possible value


##### + `fraction`: `Number`

Current position





#### Returns

`Number` The interpolated value
## map(n, min1, max1, min2, max2)


Maps a value between two ranges






```javascript
import {map} from '@okiba/math'

const x = map(0.5, 0, 1, 0, 1000)
console.log(x) // 500

const y = map(0, -1, 1, -1000, 1000)
console.log(y) // 0
```




#### Arguments


##### + `n`: `Number`

Value to map


##### + `min1`: `Number`

Source range minimum


##### + `max1`: `Number`

Source range maximum


##### + `min2`: `Number`

Target range minimum


##### + `max2`: `Number`

Target range maximum





#### Returns

`Number` Mapped value
## cap(n, min, max)


Limit a value between a min and a max (inclusive)






```javascript
import {cap} from '@okiba/math'
let progress = 1.1
progress = cap(0, 1, progress)
console.log(progress) // 1
```




#### Arguments


##### + `n`: `Number`

Value to cap


##### + `min`: `Number`

Minimum possible value


##### + `max`: `Number`

Maximum possible value





#### Returns

`Number` Capped value
## distance(x1, x2)


Distance between two numbers






```javascript
import {distance} from '@okiba/math'
const x1 = -100, x2 = 100
const d = distance(x1, x2)
console.log(d) // 200
```




#### Arguments


##### + `x1`: `Number`

First number


##### + `x2`: `Number`

Second number





#### Returns

`Number` Distance between the values
## round(n, p)


Round a number with given precision, with memoized powers






```javascript
import {round} from '@okiba/math'
const rounded = distance(1.111111, 3)
console.log(rounded) // 1.111
```




#### Arguments


##### + `n`: `Number`

Number to round


##### + `p`: `Number` | _optional_ - _default_: `3`

Precision of digits to leave





#### Returns

`Number` Rounded number
npm package: @okiba/pointer
Description: Handles pointer movements and interceptions
Latest version: 1.0.7



# Okiba / Pointer
A wrapper class that collects normalized (both mouse and touch) pointer information




```javascript
import Pointer from '@okiba/pointer'
import { MyCanvasApp } from '../path/to/my/components'

window.requestAnimationFrame(() => {
 MyCanvasApp.update(Pointer.coords, Pointer.target)
})
```



### Installation

```bash
npm i --save @okiba/pointer
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/pointer/index.js"></script>
```

## Usage

```javascript
import Pointer from '@okiba/pointer'
```

#### Untranspiled code 🛑
Okiba UI packages are not transpiled, so __don't forget to transpile them with your favourite bundler__.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:
```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```







## coords()


Coords getter







#### Returns

`Object` {x, y}
## target()


Last event target getter







#### Returns

`Event` 
## inview()


Returns pointer inview status







#### Returns

`Boolean` 
## lastEvent()


Last event getter







#### Returns

`Event` 
## matches(selectors, testAncestors)


Checks if last event target matches with given selectors







#### Arguments


##### + `selectors`: `Array.<String>`

The selectors list


##### + `testAncestors`: `Boolean`

If true, extends match test upward in the ancestors





#### Returns

`String`
npm package: @okiba/pool-system
Description: Class to manage dinamically a pool of system
Latest version: 1.0.25



# Okiba / PoolSystem
Manages a dinamically grown pool of DOM Elements
import PoolSystem from '@okiba/pool-system'

__



```javascript
const container = document.querySelector('#container')

function createEl(){
 return document.createElement('img');
}

const pool = new PoolSystem(container, createEl)
```



### Installation

```bash
npm i --save @okiba/pool-system
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/pool-system/index.js"></script>
```

## Usage

```javascript
import PoolSystem from '@okiba/pool-system'
```

#### Untranspiled code 🛑
Okiba Core packages are not transpiled, so _don't forget to transpile them with your favourite bundler_.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```







## constructor(parent, createEl)









#### Arguments


##### + `parent`: `Object`

DOM Element used as container for all pool elements.


##### + `createEl`: `function`

Function that creates an istance the element you want to add to the pool.





## ensure(size)


Makes sure the pool can host a minimum number of elements,
grows it if that's not the case.







#### Arguments


##### + `size`: `Number`

Minimum pool size to ensure.





## get()


Hands a free element from the pool.
If there isn't one, it automatically grows the pool's.
This provides dynamic sizing which ensures







#### Returns

`Element` A free DOM Element
## free(Element)


Marks an element as elegible for reutilization,
and pushes it into the pool







#### Arguments


##### + `Element`: `Element`

to mark as free





## destroy()


Nulls all references to DOM Elements
npm package: @okiba/resource-loader
Description: Class to fetch resources, prefers a separate thread
Latest version: 0.1.25



# Okiba / ResourceLoader
Manages loading of resources trough fetch to boost caching.
Transparently relies on a WebWorker if possible to load on a separate thread.

__



```javascript
import ResourceLoader from '@okiba/resource-loader'

const resLoader = new ResourceLoader()

// if `window.Worker` is available
// `fetch` happens on a separate thread!

urls.forEach(
  url => resLoader.load(url)
    .then(console.log('Loaded! 📦'))
    .catch(console.log('Fail! ☹️'))
)
```



### Installation

```bash
npm i --save @okiba/resource-loader
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/resource-loader/index.js"></script>
```

## Usage

```javascript
import ResourceLoader from '@okiba/resource-loader'
```

#### Untranspiled code 🛑
Okiba Core packages are not transpiled, so _don't forget to transpile them with your favourite bundler_.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```





#### Todo:

+ Handle abortion
+ Fetch is not on IE11
+ Clone response and pass it as promise reslult



## load(url)


Initiates loading of a resource at a given URL







#### Arguments


##### + `url`: `String`

Resource URL





#### Returns

`Promise` A promise which will be resolved if the resource
is loaded and rejected if not.
npm package: @okiba/scroll-container
Description: Container for scroll helpers
Latest version: 1.0.12



# Okiba / ScrollContainer
A class that extends Component (@okiba/component). When is enabled, it set the height of body with the element body, and set the element in fixed position so you can use the native scroll to animate what you want.




```javascript
import qs from '@okiba/dom'
import ScrollContainer from '@okiba/scroll-container'

const scrollContainer new ScrollContainer({el: qs('#app'), options: {enabled: true}})
```



### Installation

```bash
npm i --save @okiba/scroll-container
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/scroll-container/index.js"></script>
```

## Usage

```javascript
import ScrollContainer from '@okiba/scroll-container'
```

#### Untranspiled code 🛑
Okiba UI packages are not transpiled, so __don't forget to transpile them with your favourite bundler__.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:
```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```







## disable()


Disable component feature and reset the dom element to initial style







## enable()


Enable component feature, set the body height to element height and set the element in position fixed







## onResize()


Resize handler







## updateBodyHeight()


Update the body height like the element height







## listen()


Adds event listeners







## unlisten()


Removes event listeners







## onDestroy()


Disable all component feature and remove all listeners
npm package: @okiba/scroll-element
Description: Translates a panel according to scroll
Latest version: 1.0.12



# Okiba / ScrollElement
A class that extends Component (@okiba/component). When enabled, this component translate the dom element to the last Y passed to `onScroll` function




```javascript
import qs from '@okiba/dom'
import ScrollElement from '@okiba/scroll-element'

const scrollElement new ScrollElement({el: qs('#app'), options: {enabled: true}})
```



### Installation

```bash
npm i --save @okiba/scroll-element
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/scroll-element/index.js"></script>
```

## Usage

```javascript
import ScrollElement from '@okiba/scroll-element'
```

#### Untranspiled code 🛑
Okiba UI packages are not transpiled, so __don't forget to transpile them with your favourite bundler__.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:
```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```







## disable()


Disable component feature and reset the dom element transform







## enable()


Enable component feature







## update(args: {y})


Update the target Y to reach and request an animation frame if component is enabled
* Accepts an __hash__ whose properties can be:







#### Arguments


##### + `args`: `Object`

Arguments to create a component



###### + `y`: `Number`

Y to reach







## onRaf()


Update the translate Y of the element like to target Y







## onResize()


Update element bounds after a resize (top and bottom)







## listen()


Adds event listeners







## unlisten()


Removes event listeners







## onDestroy()


Destroy component removing event listeners
npm package: @okiba/scroll-manager
Description: Manages and lerps scroll position
Latest version: 1.0.12



# Okiba / ScrollManager
A class that extends EventEmitter (@okiba/event-emitter). Basically emits `scroll` events in two different ways, when enabled it lerp the scroll position and emits `scroll` events on request animation frame, when disable is like a proxy of native scroll events.




```javascript
import ScrollManager from '@okiba/scroll-manager'
import {hasTouch} from '@okiba/detect'

// Enable lerped scroll if device is not touch
hasTouch ? ScrollManager.disable() : ScrollManager.enable()
// Listen scroll events
ScrollManager.on('scroll', ({y, delta, acceleration, progress}) => console.log(y, delta, acceleration, progress))
```



### Installation

```bash
npm i --save @okiba/scroll-manager
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/scroll-manager/index.js"></script>
```

## Usage

```javascript
import ScrollManager from '@okiba/scroll-manager'
```

#### Untranspiled code 🛑
Okiba UI packages are not transpiled, so __don't forget to transpile them with your favourite bundler__.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:
```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```







## disable()


Disable lerped scroll calculation and remove the raf listener







## enable()


Enable lerped scroll calculation and add the raf listener







## onRaf()


Calculate the lerped scroll position and emit a scroll event.
The emitted scroll event pass an Object like:
```javascript
{
 y // Lerped Y
 delta // Difference between actual y and the last emitted y
 acceleration // The accelleration of the scroll
 progress // The global progress of the page
}
```







## onChange()


Callback of scroll event and update the target Y. If component is disable it emits a `scroll` event







## listen()


Adds event listeners







## unlisten()


Removes event listeners







## trigger()


Update the scroll based on the page scroll and trigger a `scroll` event
npm package: @okiba/scroller
Description: Easily animate or run callbacks as your elements enter or leave viewport on scroll
Latest version: 1.1.5

# okiba-scroller

A lightweight module to animate elements on your page as you scroll written in pure Javascript. 

## Setup
Download via npm 
```js
npm i @okiba/scroller
```

or use it via cdn 
```html
<script src="https://unpkg.com/@okiba/scroller/dist/okiba-scroller.umd.min.js"></script>`
```

```js
import 'OkibaScroller' from '@okiba/scroller'

const animator = OkibaScroller()
```

## How use it
You can add all "animators" that you want!

#### Simple use 

```js
const boxes = Array.from(document.querySelectorAll('.box-1'))
animator.observe(boxes)
  .add({
    onEnter: function(observed) {
      observed.el.classList.add('visible')
    }
  })
```

#### Advanced use

Start adding the elements that you want to observe, adding callback if you want.

```js
function onInit(observed) {
  console.log('onInit', observed)
}

function onCalculate(observed) {
  console.log('onCalculate', observed)
}

function onScroll(scrollY, deltaY) {
  console.log('onCalculate', observed)
}

const observed = animator.observe(
  Array.from(document.querySelectorAll('.box-1')),
  onInit, // optional, called when element is added
  onCalculate // optional, called every time that the element position in calculated
  onScroll, // optional, called when document scroll
)
```

Now you can add multiple sets of callback 

```js
observed.add({
  position: 'top', // optional, possible values are ['top', 'middle', 'bottom']
  offset: 0, // optional
  onEnter: function(observed, scrollY, deltaY) {
    // called when element enter in viewport based on position and offset settings

    // for example set an attribute
    observed.el.setAttribute('data-state', 'show');
    // or add a css class
    observed.el.classList.add('visible');
  },
  onRaf(): function(observed, scrollY, deltaY) { 
    // optional, called when element is in viewport based on position and offset settings
    // ... example of canvas animation when in viewport
    console.log('onRaf', observed)
  },
  onExit: function(observed, scrollY, deltaY) { 
    // optional, called when element exit in viewport based on position and offset settings
    observed.el.classList.remove('visible')
  }
}
```

An example to animate a canvas in viewport (animateOnce to false):
```js
observed.add({
  onRaf: function(observed, scrollY, deltaY){
    observed.ctx.clearRect(0,0,300,150);
    observed.ctx.fillStyle="red";
    observed.ctx.fillRect(0,0,300,150);
  },
});

```

or play video only in viewport:
```js
observed.add({
  onEnter: function(elem, scrollY, deltaY){
    elem.el.play();
  },
  onExit: function(elem, scrollY, deltaY){
    elem.el.pause();
  }
});

```

Be sure to polyfill if needed:
- `window.requestAnimationFrame`


*ENJOY!*

**Okiba Gang** 🔪
npm package: @okiba/search
Description: Search functions used in okiba.js
Latest version: 1.0.25



# Okiba / search
Search utilities

__



### Installation

```bash
npm i --save @okiba/search
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/search/index.js"></script>
```

## Usage

```javascript
import search from '@okiba/search'
```

#### Untranspiled code 🛑
Okiba Core packages are not transpiled, so _don't forget to transpile them with your favourite bundler_.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```







## binarySearch(data, target, start, end, prop)


Binary searches an array







#### Arguments


##### + `data`: `Array.<Object>` or  `Array.<Number>`

data to search


##### + `target`: `Number`

the value to find


##### + `start`: `Number`

array index where to start from


##### + `end`: `Number`

array index where to end to


##### + `prop`: `String` | _optional_

property to look into (if data contains objects)





#### Returns

`Number` index of the closest element found
npm package: @okiba/sizes-cache
Description: Keeps sizes of dom elements up to date
Latest version: 1.0.12



# Okiba / SizesCache
A class to compute and cache element sizes.




```javascript
import { qs } from '@okiba/dom'
import SizesCache from '@okiba/size-cache'

const sizes = SizesCache.get(qs('#app'))
console.log(sizes)
```



### Installation

```bash
npm i --save @okiba/sizes-cache
```

Or import it directly in the browser
```html
<script type="module" src="https://unpkg.com/@okiba/sizes-cache/index.js"></script>
```

## Usage

```javascript
import SizesCache from '@okiba/sizes-cache'
```

#### Untranspiled code 🛑
Okiba UI packages are not transpiled, so __don't forget to transpile them with your favourite bundler__.
For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:
```javascript
{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}
```







## get(el)


Element's sizes getter







#### Arguments


##### + `el`: `Element`







## compute(el)


Computes element's sizes







#### Arguments


##### + `el`: `Element`







## onResize()


Updates elements' sizes on resize







## listen()


Adds resize event listener to EventManager







## unlisten()


Removes resize event listener from EventManager







## reset()


Resets component's data