Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @snex/react-connect with all npm packages installed. Try it out:

var reactConnect = require("@snex/react-connect")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@snex/react-connect v0.3.0

Widget for connecting gamepads with SNEX for React.

SNEX React Widget

A React widget for connecting SNEX gamepads.

Watch an intro to SNEX

When this widget exist in your application any user can control your application on with their phone by clicking the widget and going to the URL shown.

The widget will keep track of link lifetime according to what the SNEX API reports. After the link expires the widget will go back to showing the SNEX logo and a new session can be requested by clicking again.

Widget Demo

For more information on the controller API refer to the SNEX Documentation.


  • Minimal Example

  • Multiple Connections


Watch Video on YouTube.


yarn add @snex/react-connect

Require component.

import SNEX from '@snex/react-connect';


Wire up SNEX with the onConnection property to receive remotes and listen to the data event of remotes.

class MyComponent extends React.Component {
  handleConnection = (controller) => {
    controller.on('data', data => {
      if (data.state && data.key === 'A') {;

  render() {
    return <div>


onConnection Function (required)

Function to call everytime a controller is connected. The function will have the connecting controller as argument. To listen for input from controller attach a listener to the data event.

<SNEX onConnection={controller => {
    controller.on('data', data => {
        console.log('Controller sent', data);

type String (optional)

Controller type to create URL for like nes, snes, or genesis. Default to nes. For a full list of controllers refer to the SNEX Documentation.


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free