Skip to content

Latest commit

 

History

History
148 lines (84 loc) · 13.2 KB

README.md

File metadata and controls

148 lines (84 loc) · 13.2 KB

Okiba UI

A complete collection of Okiba tools and components that help you to manage UI elements and behaviors


Installation

You can grab all Okiba UI packages by using npx installer:

npx @okiba/ui

Usage

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:

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

Full Components List:

A base component aimed to handle a custom html cursor


Utilities to check some browser features


A custom events management system

Submodules:

A singleton to manage centralized event listeners

A base class that defines a global event handler interface

An handler class aimed to centralize a native browser event listener

An handler class aimed to centralize a requestAnimationFrame


A wrapper class that collects normalized (both mouse and touch) pointer information


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.


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


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.


A class to compute and cache element sizes.


Makes elements scroll smoothly with lerped translations Can be extended or instantiated


Makes an element sticky according to page scroll Can be extended or instantiated


Retrieves the percentage (0 to 1) of element's in-view portion according to page scroll Can be extended or instantiated