open-index/open-npm huggingface dataset:
npm package: @odnh/use-swipe
Description: react hook useSwipe
Author: 김도현
Latest version: 1.2.4

# useSwipe

React Custom Hook useSwipe

## Install

```bash
yarn add @odnh/use-swipe
# or
npm install @odnh/use-swipe
```

## Use
```tsx
  useSwipe(target: Target, options: Options) => SwipeMoveState | SwipeDoneState;
```

### Parameters
|Name|Type|Description|Required|
|-----|-----------|---------------|-----|
|target|`HTMLElement` or `React.MutableRefObject<HTMLElement>`|target element|`true`|
|option|`Object`|[Options](https://github.com/d0hyeon/useSwipe/blob/master/README.md#options)|`false`|

#### options 
|Name|type|Description|Default value|
|-----|--------|---------------------------|----|
|fps|`number`|-|60|
|useEvent|`boolean`|Whether to use the swipe event [`swipestart` - `swipemove` - `swipeend`].|`false`|
|excludeElement|`HTMLElement`|Elements to exclude the beginning.|`null`|


---
### Returns
|Name|Type|Description|
|-----|-----------|---------------|
|swipeState|`SwipeMoveState` or `SwipeDoneState`| |
<br />

##### SwipeMoveState
|Name|Type|Description|
|-----|----------|-----------|
|state|`SwipeStateEnum.MOVE`| move |
|x|`number`|moving position value|
|y|`number`|moving position value|
|difference|`{x: 0, y: 0}`|position difference between the beginning and the end.|
|duration|`0`|time of moved|

<br/>

##### SwipeDoneState
|Name|Type|Description|
|-----|----------|-----------|
|state|`SwipeStateEnum.DONE`| done |
|x|`0`|moving position value|
|y|`0`|moving position value|
|difference|`{x: number, y: number}`|position difference between the beginning and the end.|
|duration|`number`|time of moved|
<br/> 

## Example

[live demo](https://k5yub.csb.app/)

```jsx
import React from 'react';
import useSwipe, { SwipeStateEnum } from '@odnh/use-swipe';

const DEFAULT_STYLE = {
  width: '100px',
  height: '100px',
  border: '1px solid #ddd',
  transform: 'translate(0, 0)',
  transition: 'transform 300ms'
};
const App = () => {
  const elementRef = React.useRef(null);
  const swipe = useSwipe(elementRef);
  
  const swipeStyle = React.useMemo(() => {
    if(state === SwipeStateEnum.DONE) {
      return DEFAULT_STYLE;
    } else {
      const { x, y } = swipe
      return {
        ...DEFAULT_STYLE,
        transform: `translate(${x}px, ${y}px)`,
        transition: 'transform 100ms'
      }
    }
  }, [swipe]);
  
  return (
    <div ref={elementRef} style={{width: '100vw', height: '100vh'}}>
      <div
        style={swipeStyle}
      >
        swipe
      </div>
    </div>
  )
}

```
npm package: @odnoklassniki/ok-apps-sdk
Description: Connects an Application with OK client
Author: OK
Latest version: 1.0.6

# Odnoklassniki app sdk

## Usage

```js
import OKSDK from '@odnoklassniki/ok-apps-sdk';

// Init SDK
await OKSDK.init();
```

For use in a browser, include the file [`dist/browser.min.js`](https://unpkg.com/@odnoklassniki/ok-apps-sdk/dist/browser.min.js) and use as follows

```html
<script src="https://unpkg.com/@odnoklassniki/ok-apps-sdk/dist/browser.min.js"></script>

<script>
    // Init SDK
    OKSDK.init()
        .then(mode => {...})
        .catch(error => {...});
</script>
```

## API Reference

### `OKSDK.Methods`

Contains groups of methods that avalable and recommended for use

Some of them return promise with response 

**Response fields**

- `status` Text with status _ok_ | _error_
- `data` Data of response _string_ | _boolean_ | _number_ | _object_

**Example**
```js
const {status, data: appId} = await OKSDK.Methods.Utils.getAppId();
```

Some of them return value synchronously

**Example**
```js
const isSupported = OKSDK.Methods.Utils.isSupported(); // boolean
```

Some of them need callback to be provided

**Callback arguments**

- `status` Text with status _ok_ | _error_
- `data` Data of response _string_ | _boolean_ | _number_ | _object_

**Example**
```js
const callback = (status, data) => {
    console.log(data);
};

OKSDK.Methods.Utils.observeServiceCallbacks('DEVICE_ORIENTATION', callback);
```

### `OKSDK.invoke`
### `OKSDK.invokeUIMethod` @Depricated

This methods allow you to call methods as it was done in previous versions of SDK

**Parameters**

- `method` _required_ Method name
- `params` _optional_ Array of parameters
- `callback` _optional_ Callback for getting result

**Example**

```js
// Sending event to client
OKSDK.invoke('joinGroup', [groupId], ({status, data}) => {});
```

### `OKSDK.Client.call`

Call API methods

**Parameters**

- `params` _required_ Object with call params including method name
- `callback` _optional_ A function that will be called after the server responds
- `resig` _optional_ Required when it is necessary to request user confirmation for any action through a separate preview. In all other cases, call the function with only 2 parameters.

Method can be used with callback or with promise

**Example**

```js
// Sending event to client
const params = {
    "method":"friends.get"
};

const callback = (status, data, error) => {
    if (error) {
        processError(error);
    } else {
        processFriendIds(data);
    }
};

OKSDK.Client.call(params, callback);
```

OR 

```js
// Sending event to client
const params = {
    "method":"friends.get"
};

const data = await OKSDK.Client.call(params);
```
npm package: @odoe/explode
Description: Utility to explode ArcGIS geometries into individual, component geometries.
Author: Rene Rubalcava
Latest version: 0.0.1

# @odoe/explode

A small utility to explode ArcGIS geometries into individual, component geometries.

* Inspired by the [Explode utility of ArcGIS Desktop](https://desktop.arcgis.com/en/arcmap/latest/manage-data/creating-new-features/separating-a-multipart-feature.htm)
* Polygon -> Polylines
* Polyline -> Points
* Multipoint -> Points

## Usage

```sh
npm install @odoe/explode
```

```js
import { explode } from '@odoe/explode';

// Polygon -> Polylines
const lines = explode(polygon);
// Polyline -> Points
const points = explode(line);
// Multipoint -> Points
const points = explode(multipoint);
```

Works with [`@arcgis/core`](https://www.npmjs.com/package/@arcgis/core) version 4.22 and up.
npm package: @odoo/eslint-plugin-owl
Description: Eslint rules specific for owl
Author: Odoo
Latest version: 1.1.0

# eslint-plugin-owl
Owl specific rules for Odoo development

## Installation
```bash
npm install @odoo/eslint-plugin-owl
```
Add the plugin to your list in your eslint config file.
```js
plugins: ["@odoo/owl"]
```
Use the following available rules in your `rules` object.
The rules are namespaced by `@odoo/owl`.
Exemple:
```js
// ...
plugins: ["@odoo/owl"],
rules: {
    "@odoo/owl/force-component-props-declaration": 2, // 1 for warning, 2 for error
},
// ...
```

## Rules

#### `force-component-props-declaration`
Enforce the need to declare a props property to any class extending directly from `Component`.
##### Options: 
`ignoreGlobs` Allow to define path globs to be ignored by the rule
```js
"@odoo/owl/force-component-props-declaration": [2, { ignoreGlobs: "**/tests/**" }]
```
npm package: @odopod/eslint-config
Description: Odopod's eslint config
Author: Odopod
Latest version: 2.0.0

# eslint-config-odopod [![Build Status](https://travis-ci.org/odopod/eslint-config-odopod.svg?branch=master)](https://travis-ci.org/odopod/eslint-config-odopod)

> ESLint [shareable config](http://eslint.org/docs/developer-guide/shareable-configs.html) by [odopod](http://www.odopod.com)

This config extends Airbnb's `eslint-config-airbnb-base` with a few overrides. We mostly follow their [JavaScript Style Guide](https://github.com/airbnb/javascript/).

## Install

```bash
npm install --save-dev eslint @odopod/eslint-config
```

## Usage

In your ESLint configuration (probably an `.eslintrc` file), add:

```json
{
  "extends": "@odopod"
}
```

## Editor Integrations

### Atom

Install [`linter-eslint`](https://atom.io/packages/linter-eslint). To fix files automatically, bring up the command palette (<kbd>⬆</kbd> + <kbd>⌘</kbd> + <kbd>p</kbd>) and choose `Linter Eslint: Fix File`.

### Sublime Text 3

Install [`SublimeLinter-eslint`](https://github.com/roadhump/SublimeLinter-eslint) and [`ESLint-Formatter`](https://github.com/TheSavior/ESLint-Formatter). To fix files automatically, use the shortcut <kbd>⬆</kbd> + <kbd>⌘</kbd> + <kbd>h</kbd>, or choose `ESLint Formatter: Format this file` from the command palette.

### Others

For other integrations, see ESLint's [list](http://eslint.org/docs/user-guide/integrations).
npm package: @odopod/odo-affix
Description: Makes an element fixed position while its within a container.
Author: Odopod
Latest version: 1.2.0

# Odo Affix

> Makes an element fixed position while its within a container.

## Install

```shell
npm install @odopod/odo-affix --save
```

## Quick Start

```js
import OdoAffix from '@odopod/odo-affix';

const affix = new OdoAffix(document.querySelector('.js-my-sidebar'));
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-affix/
npm package: @odopod/odo-background-video
Description: Plays in the background when the element comes into view and falls back to an image if the browser cannot autoplay video.
Author: Odopod
Latest version: 1.1.2

# Odo Background Video

> Add a odo video component which plays in the background when

## Install

```shell
npm install @odopod/odo-background-video --save
```

## Quick Start

```js
import OdoBackgroundVideo from '@odopod/odo-background-video';

const backgroundOne = new OdoBackgroundVideo(document.querySelector('#background-example-one'));
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-background-video/
npm package: @odopod/odo-base-component
Description: Base component for odo components. Includes media query listeners and exports base globals
Author: Odopod
Latest version: 1.2.1

# Odo Base Component

> Base component for odo components. Includes media query listeners and exports base globals

## Install

```shell
npm install @odopod/odo-base-component --save
```

## Quick Start

```js
import OdoBaseComponent from '@odopod/odo-base-component';

class CoolModule extends OdoBaseComponent {
  constructor(element) {
    // Add media query listeners for this component.
    super(element, true);

    // Optionally call the listener on init.
    this.onMediaQueryChange();
  }

  /**
   * Do something when the breakpoint switches.
   */
  onMediaQueryChange() {
    this.element.className = '';

    if (this.breakpoint.matches('xs') || this.breakpoint.matches('sm')) {
      this.element.classList.add('xs-or-sm');
    } else {
      this.element.classList.add('md-or-lg');
    }

    this.element.classList.add('cool--' + OdoBaseComponent.breakpoint.current);
  }
}
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-base-component/
npm package: @odopod/odo-carousel
Description: Performant, awesome carousels.
Author: Odopod
Latest version: 2.1.3

# Odo Carousel

> Performant, awesome carousels.

### Why?

Odo Carousel has a few distinct advantages over other carousel libraries with similar feature sets, such as [Slick](http://kenwheeler.github.io/slick/):

1. Utilizes the Odo Draggable module, which is reusable for other draggable components that you might include in your project, thus saving weight and user compile time.
2. Odo Carousel has been battle-tested on several large-scale web application projects, and includes learnings from practically every Odopod project from 2013 onward.
3. It performs as well as, and more often better than, any other carousel library we've tested.
4. Has unit tests backing its methods and API.

## Install

```shell
npm install @odopod/odo-carousel --save
```

## Quick Start

```js
import OdoCarousel from '@odopod/odo-carousel';

const carousel = new OdoCarousel(document.getElementById('my-carousel'));
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-carousel/
npm package: @odopod/odo-device
Description: Device-specific settings for JS and CSS
Author: Odopod
Latest version: 1.3.0

# Odo Device

> Device-specific settings and helpers.

## Install

```shell
npm install @odopod/odo-device --save
```

## Quick Start

`import` or `require` the package, then use its properties and methods.

```js
import OdoDevice from '@odopod/odo-device';

console.log('Has touch events:', OdoDevice.HAS_TOUCH_EVENTS);
console.log('Touch action:', OdoDevice.prefixed('touchAction', 'pan-y'));
console.log('Has local storage:', OdoDevice.HAS_LOCAL_STORAGE);
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-device/
npm package: @odopod/odo-dialog
Description: Responsive window dialog component focused on a11y and extendibility
Author: Odopod
Latest version: 2.0.2

# Odo Dialog

> Responsive window dialog component focused on a11y and extendibility

## Install

```shell
npm install @odopod/odo-dialog --save
```

## Quick Start

```js
import OdoDialog from '@odopod/odo-dialog';

const dialog = new OdoDialog(document.getElementById('my-dialog-element'));
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-dialog/
npm package: @odopod/odo-draggable
Description: A class for versatile, performant draggability.
Author: Odopod
Latest version: 1.2.2

# Odo Draggable

> A class for versatile, performant draggability.

## Install

```shell
npm install @odopod/odo-draggable --save
```

## Quick Start

```js
import OdoAffix from '@odopod/odo-draggable';

const draggable = new OdoAffix(document.querySelector('.js-my-sidebar'));
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-draggable/
npm package: @odopod/odo-dropdown
Description: Custom dropdown component that defaults to native select elements on touch devices.
Author: Odopod
Latest version: 2.1.1

# Odo Dropdown

> Custom dropdown component that defaults to native select elements on touch devices.

## Install

```shell
npm install @odopod/odo-dropdown --save
```

## Quick Start

```js
import OdoDropdown from '@odopod/odo-dropdown';

const dropdown = new OdoDropdown(document.getElementById('my-dropdown'));
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-dropdown/
npm package: @odopod/odo-dual-viewer
Description: A draggable UI component which reveals two panes.
Author: Odopod
Latest version: 1.1.3

# Odo Dual Viewer

> A draggable UI component which reveals two panes.

## Install

```shell
npm install @odopod/odo-dual-viewer --save
```

## Quick Start

```js
import OdoDualViewer from '@odopod/odo-dual-viewer';

const dualViewer = new OdoDualViewer(document.getElementById('.my-dual-viewer'));
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-dual-viewer/
npm package: @odopod/odo-expandable
Description: A simple, accessible combination of two elements; A trigger to handle clicks, and a target to toggle visibility.
Author: Odopod
Latest version: 0.2.2

# Odo Expandable

> A simple, accessible combination of two elements; A trigger to handle clicks, and a target to toggle visibility.

## Install

```shell
npm install @odopod/odo-expandable --save
```

## Quick Start

```js
import OdoExpandable from '@odopod/odo-expandable';

const instances = OdoExpandable.initializeAll();;
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-expandable/
npm package: @odopod/odo-helpers
Description: A collection of helper methods for Odo projects.
Author: Odopod
Latest version: 2.0.2

# Odo Helpers

> A collection of helper methods for Odo projects.

## Install

```shell
npm install @odopod/odo-helpers --save
```

## Quick Start

```js
import { onTransitionEnd } from '@odopod/odo-helpers';

onTransitionEnd(myElement, () => {
  console.log('`transitionend` event emitted from "myElement"');
});
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-helpers/
npm package: @odopod/odo-hotspots
Description: A component which positions and opens hotspots.
Author: Odopod
Latest version: 1.2.1

# Odo Hotspots

> A component which positions and opens hotspots.

## Install

```shell
npm install @odopod/odo-hotspots --save
```

## Quick Start

```js
import OdoHotspots from '@odopod/odo-hotspots';

const hotspots = new OdoHotspots(document.getElementById('basic-hotspots'));
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-hotspots/
npm package: @odopod/odo-module
Description: Augment a class' static methods with helpers
Author: Odopod
Latest version: 1.2.1

# Odo Module

> Augment a class' static methods with helpers

## Install

```shell
npm install @odopod/odo-module --save
```

## Quick Start

```js
import OdoModule from '@odopod/odo-module';

class CoolModule {}

CoolModule.Classes = {
  BASE: 'cool-module',
};

OdoModule.register(CoolModule);
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-module/
npm package: @odopod/odo-object-fit
Description: Fits media elements (img, video). It polyfills CSS' object-fit: cover; If the browser supports object-fit, it will not run.
Author: Odopod
Latest version: 1.1.1

# Odo Object Fit

> Fits media elements (img, video). It polyfills CSS' object-fit: cover; If the browser supports object-fit, it will not run. The media element should have full width and height as well as the object-fit property.

## Install

```shell
npm install @odopod/odo-object-fit --save
```

## Quick Start

```css
.my-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
```

```js
import OdoObjectFit from '@odopod/odo-object-fit';

// Cover a single element.
OdoObjectFit.cover(myElement);

// Cover multiple media elements.
OdoObjectFit.cover([myElement, thatOtherElement]);
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-object-fit/
npm package: @odopod/odo-on-swipe
Description: Provide event hook for swipes on an element.
Author: Odopod
Latest version: 1.1.2

# Odo On Swipe

Provide event hook for swipes on an element.

## Install

```shell
npm install @odopod/odo-on-swipe --save
```

## Quick Start

```js
import OdoOnSwipe from '@odopod/odo-on-swipe';

const element = document.getElementById('foo');
const instance = new OdoOnSwipe(element, swiped(event) {
  element.textContent = 'Swiped ' + event.direction;
});
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-on-swipe/
npm package: @odopod/odo-pointer
Description: An abstraction for pointer, mouse, and touch events.
Author: Odopod
Latest version: 1.2.1

# Odo Pointer

> An abstraction for pointer, mouse, and touch events.

## Install

```shell
npm install @odopod/odo-pointer --save
```

## Quick Start

```js
import OdoPointer from '@odopod/odo-pointer';

const pointer = new OdoPointer(document.querySelector('.js-my-sidebar'));
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-pointer/
npm package: @odopod/odo-responsive-attributes
Description: Parse data attributes with respect to their breakpoints.
Author: Odopod
Latest version: 1.1.1

# Odo Responsive Attributes

Parse data attributes with respect to their breakpoints.

## Install

```shell
npm install @odopod/odo-responsive-attributes --save
```

## Quick Start

```js
import OdoResponsiveAttributes from '@odopod/odo-responsive-attributes';

clamper = new OdoResponsiveAttributes(document.getElementById('clamper'));
console.log(clamper.values); // Object with `xs`, `sm`, `md`, and `lg` keys.
console.log(clamper.currentValue); // Value based on the current breakpoint.
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-responsive/
npm package: @odopod/odo-responsive-classes
Description: Swap class names of elements using responsive attributes.
Author: Odopod
Latest version: 1.1.1

# Odo Responsive Classes

> Swap class names of elements using responsive attributes.

## Install

```shell
npm install @odopod/odo-responsive-classes --save
```

## Quick Start

```html
<div class="odo-responsive-classes" data-class.xs="green with-padding" data-class.sm="blue"></div>
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-responsive-classes/
npm package: @odopod/odo-responsive-images
Description: Native responsive images with deferred loading.
Author: Odopod
Latest version: 1.2.0

# Odo Responsive Images

> Native responsive images with deferred loading.

## Install

```shell
npm install @odopod/odo-responsive-images --save
```

## Quick Start

```html
<div class="odo-responsive-img">
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="https://source.unsplash.com/category/buildings/800x400" media="(min-width: 992px)">
  <source srcset="https://source.unsplash.com/category/technology/600x300" media="(min-width: 768px)">
  <source srcset="https://source.unsplash.com/category/nature/400x200">
  <!--[if IE 9]></video><![endif]-->
  <img alt="picture 1 description">
  <noscript>
    <img src="https://source.unsplash.com/category/nature/400x200" alt="picture 1 description">
  </noscript>
</div>
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-responsive-images/
npm package: @odopod/odo-reveal
Description: Reveal elements on the page as they come into view.
Author: Odopod
Latest version: 2.0.2

# Odo Reveal

> Reveal elements on the page as they come into view.

## Install

```shell
npm install @odopod/odo-reveal --save
```

## Quick Start

```html
<section class="odo-reveal">
  <h2 class="odo-reveal__target">Markup</h2>
  <p class="odo-reveal__target odo-reveal--2">…</p>
</section>
```

```js
import OdoReveal from '@odopod/odo-reveal';

const instances = OdoReveal.initializeAll();
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-reveal/
npm package: @odopod/odo-scroll-animation
Description: Performant scroll listeners.
Author: Odopod
Latest version: 1.2.0

# Odo Scroll Animation

> Performant scroll listeners.

## Install

```shell
npm install @odopod/odo-scroll-animation --save
```

## Quick Start

```js
import OdoScrollAnimation from '@odopod/odo-scroll-animation';

const scrollElement = document.getElementById('scroller-thing');
const id = OdoScrollAnimation.add(scrollElement, function (scrollTop) {
  console.log('scroller-thing scrolled');
});
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-scroll-animation/
npm package: @odopod/odo-scroll-feedback
Description: Based user input from mouse, keyboard, and touch, the `ScrollFeedback` instance will emit navigation events.
Author: Odopod
Latest version: 1.2.0

# Odo Scroll Feedback

> Based user input from mouse, keyboard, and touch, the `ScrollFeedback` instance will emit navigation events with a `direction` property signifying which way the user should be taken

## Install

```shell
npm install @odopod/odo-scroll-feedback --save
```

## Quick Start

```js
import OdoScrollFeedback from '@odopod/odo-scroll-feedback';

var scrollFeedback = new OdoScrollFeedback(document.body);

scrollFeedback.on(OdoScrollFeedback.Events.NAVIGATE, function(data) {
  switch (data.direction) {
    case OdoScrollFeedback.Direction.NEXT:
      console.log('go to the next state');
      break;
    case OdoScrollFeedback.Direction.PREVIOUS:
      console.log('go to the previous state');
      break;
    case OdoScrollFeedback.Direction.START:
      console.log('home key pressed');
      break;
    case OdoScrollFeedback.Direction.END:
      console.log('end key pressed');
      break;
  }
}, false);
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-scroll-feedback/
npm package: @odopod/odo-share
Description: Share links to social media.
Author: Odopod
Latest version: 1.1.1

# Odo Share

> Share links to social media.

## Install

```shell
npm install @odopod/odo-share --save
```

## Quick Start

```html
<a href="#" class="odo-share" data-service="twitter">Share on Twitter</a>
```

or

```js
import OdoShare from '@odopod/odo-share';

OdoShare.share({
  service: 'twitter'
});
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-share/
npm package: @odopod/odo-sticky-headers
Description: A mananger for sticky things
Author: Odopod
Latest version: 1.2.0

# Odo Sticky Headers

> A mananger for sticky things

## Install

```shell
npm install @odopod/odo-sticky-headers --save
```

## Quick Start

```js
import OdoStickyHeaders from '@odopod/odo-sticky-headers';

const stickyMananger = new OdoStickyHeaders();
const stickies = Array.from(document.querySelectorAll('.my-sticky'));
stickyMananger.add(stickies);
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-sticky-headers/
npm package: @odopod/odo-tabs
Description: A component for switching between panes of content.
Author: Odopod
Latest version: 2.0.2

# Odo Tabs

> A component for switching between panes of content.

## Install

```shell
npm install @odopod/odo-tabs --save
```

## Quick Start

```js
import OdoTabs from '@odopod/odo-tabs';

const tabs = new OdoTabs(document.querySelector('.js-my-sidebar'));
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-tabs/
npm package: @odopod/odo-tap
Description: A service to interpret taps on elements.
Author: Odopod
Latest version: 1.1.2

# Odo Tap

> A service to interpret taps on elements. Useful for delegated clicks on the document or body because iOS is buggy with delegated clicks on "non-clickable" elements.

## Install

```shell
npm install @odopod/odo-tap --save
```

## Quick Start

```js
import OdoTap from '@odopod/odo-tap';

const tapId = OdoTap.addListener(document.getElementById('thing-to-tap'), function () {
  console.log('tapped');
});
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-tap/
npm package: @odopod/odo-video
Description: A lightweight html5 video wrapper.
Author: Odopod
Latest version: 1.2.2

# Odo Video

> A lightweight html5 video wrapper.

## Install

```shell
npm install @odopod/odo-video --save
```

## Quick Start

```js
import OdoVideo from '@odopod/odo-video';

const player = new OdoVideo(document.getElementById('video-wrapper'));
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-video/
npm package: @odopod/odo-viewport
Description: Viewport enter and exit monitoring for elements.
Author: Odopod
Latest version: 1.1.1

# Odo Viewport

> Viewport enter and exit monitoring for elements.

## Install

```shell
npm install @odopod/odo-viewport --save
```

## Quick Start

```js
import OdoViewport from '@odopod/odo-viewport';

OdoViewport.add({
  element: document.getElementById('demo-enter-exit'),
  enter: function () {
    this.setAttribute('in-view', true);
  },
  exit: function () {
    this.removeAttribute('in-view');
  }
});
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-viewport/
npm package: @odopod/odo-window-events
Description: Reusable, throttled events on the window object.
Author: Odopod
Latest version: 1.2.0

# Odo Window Events

> Reusable, throttled events on the window object.

## Install

```shell
npm install @odopod/odo-window-events
```

## Quick Start

```js
import OdoWindowEvents from '@odopod/odo-window-events';

OdoWindowEvents.onScroll(function (scrollTop, scrollLeft) {
  console.log('Scrolled', scrollTop, scrollLeft);
});
```

## [Documentation][permalink]

Visit the [Odo component directory][permalink] for demos, code examples, and documentation.

[permalink]: http://code.odopod.com/odo-window-events/