<joy-con>

A Custom Element that maps a Nintendo Switch Joy-Con controller to keyboard events. Add it to web-based slide decks for an easy remote.

Based on @vaneenige's fantastic unswitch library

Demo

Check out the demo on jsbin!

You'll want to have a Joy-Con paired to your PC already.

Install

As a script tag: <script src="https://unpkg.com/joy-con-element/dist/joy-con.js"></script>

More installation options (Webpack, etc) described here: https://stenciljs.com/docs/framework-integration/

Usage

<joy-con side="r" left="y" right="a"></joy-con>

The component will not activate until side has been defined.

Not Ready:

Ready:

Props

All props are also accessible as attributes.

side: 'l' | 'r'

Which type of Joy-Con

left: JoyConButton

Which Joy-Con button triggers a Left keyboard event

right: JoyConButton

Which Joy-Con button triggers a Right keyboard event

The full set of JoyConButton options is described in unswitch

Events

button

Emitted when a button is pressed (or released). Contains metadata in the detail section of the CustomEvent:

interface ButtonEventDetail {
  button: string; // which Joy-Con button was pressed
  pressed: boolean; // true if the button was pressed, false if the button was released
}