@switch-company/keyboard-navigation NPM

Switch - keyboard-navigation

Detect and add a class when the keyboard is used, removes it on click or mouse move.

This plugin is written in ES2015 and available either in uncompiled form in the /lib folder or compiled for ES5 in the /dist folder. If your project uses babel with Webpack or Rollup, you should change the exclusion so this plugin gets compiled or force Webpack or Rollup to fetch the compiled version by using the main entry of the package.json file instead of the module entry.

// .babelrc file or configuration within webpack or rollup
{
  "plugins": [...],
  "exclude": "node_modules/!(@switch-company)/**",
}

Installation

$ npm install @switch-company/keyboard-navigation

Usage

import KB from '@switch-company/keyboard-navigation';

const kb = new KB({
  classElement,
  className,
  moveThreshold,
  rules
});

Parameters

All parameters are optional and have defaults values except rules.

Name	Type	Description
`classElement`	`HTMLElement`	The element which will receive the class when keyboard is in use (defaults to `document.documentElement`)
`className`	`String`	The class to apply to the element defined with `classElement` (defaults to `keyboard`)
`moveThreshold`	`Number` or `false`	Distance in pixels that the mouse has to move before the class is removed. Can be disabled by passing `false` (defaults to `10`)
`rules`	`Function`	Custom function that receives the tab event. Allows custom checks to decide if the class can be added. Must return `true` to add the class

Example using the `rule` parameter

import KB from '@switch-company/keyboard-navigation';

const kb = new KB({
  // don't add the class if the tab comes from an input element
  rules: event => {
    return event.target.nodeName !== 'INPUT';
  }
});

@infinitebrahmanuniverse/nolb-_swi @everything-registry/sub-chunk-887 @zalastax/nolb-_swi

1.0.1

6 years ago

1.0.0