A widget that simplifies connecting to SNEX in React projects.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
src Remove file name endings. Dec 16, 2017
.babelrc Move ignore to build only. Dec 16, 2017
.gitignore Initial commit. Aug 9, 2017
.npmignore Initial commit. Aug 9, 2017
.travis.yml Deploy using `next` tag. Dec 16, 2017
README.md Update README.md Dec 18, 2017
package.json 0.3.0 Dec 16, 2017
yarn.lock Add basic test suite. Dec 16, 2017


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 connect to your web app with a gamepad by 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.



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.