keywalk
TypeScript icon, indicating that this package has built-in type declarations

0.4.1 • Public • Published

keywalk

Keywalk let you to walk through HTML elements via up/down arrow keys.

Demo

Codepen

Install

npm i keywalk

# or using yarn

yarn add keywalk
import Keywalk from 'keywalk'

Or include from CDN

<script src="https://cdn.jsdelivr.net/npm/keywalk@0.3.1">

Parameters

Parameter Type Description Default
trigger string The element to listen the key event. (with CSS selector) document
container string Root container of items. Keywalk will walk on nodes that are direct children of the container. Required -
activeClass string CSS class name of currently active item. 'active'
selectKey string The key that trigger the onSelect() event. Can be specified by a key name. 'Enter'

Events

Event Description
onWalk(element, index) Will return the HTML node and index of currently active item.
onSelect(element, index) Will return the HTML node and index of selected item.

Functions

Function Description
reset() Will reset the focus state on the list.

How to use

<input id="input" />
<ul class="list">
  <li>Orange</li>
  <li>Cherry</li>
  <li>Banana</li>
  <li>Apple</li>
  <li>Pineapple</li>
</ul>

<script>
  new Keywalk({
    trigger: '#input',
    container: '.list',
    onWalk: (element, index) => {
      console.log('active item: ', element, ' index: ', index)
    },
    onSelect: (element, index) => {
      console.log('selected item: ', element, ' index: ', index)
    }
  })
</script>

Reset the focus state:

const keywalk = new Keywalk({
  ...
})

btn.addEventListener('click', () => {
  keywalk.reset()
})

Package Sidebar

Install

npm i keywalk

Weekly Downloads

0

Version

0.4.1

License

MIT

Unpacked Size

16.2 kB

Total Files

8

Last publish

Collaborators

  • dgknca