joystick-react

Joystick

A Focus System and Gamepad abstraction for React.

Installation

This module is available in the npm registry.

Using NPM
--
npm install joystick-react


Using Yarn
--
yarn add joystick-react

Usage

Quick Start

Joystick is built on React Hooks, which means that you need at least version 16.8 of React.

import * as React from 'react';
import { useFocus } from 'joystick-react';

export const Card = props => {
    const { isFocused, ref } = useFocus();

    return (
        <div
            ref={ref}
            style={{
                position: 'absolute',
                top: props.y,
                left: props.x,
                width: 200,
                height: 200,
                backgroundColor: isFocused ? 'green' : 'red'
            }}
        />
    );
}

Listening to Gamepad events

You can pass a function to the useFocus-hook which then will run whenever a Gamepad event occurs while focusing on the component. The function you pass will get the Gamepad event as a parameter.

import * as React from 'react';
import { useFocus } from 'joystick-react';

export const Card = props => {
    const { isFocused, ref } = useFocus(gamepadEvent => {
        console.log('A button was pressed on a gamepad while this component was focused!', gamepadEvent);
    });

    return (
        <div
            ref={ref}
            style={{
                position: 'absolute',
                top: props.y,
                left: props.x,
                width: 200,
                height: 200,
                backgroundColor: isFocused ? 'green' : 'red'
            }}
        />
    );
}

Using with Framer X

As Framer X Beta supports React Hooks, it's super easy to use Joystick in your Framer X prototype. Here's an example of a Card component that animates to different styles depending on the focus-state.

import * as React from "react"
import { Frame } from "framer"
import { useFocus } from "joystick-react"

export const Card = props => {
    const variants = {
        initial: {
            scale: 1,
            background: "rgba(255, 255, 255, .1)",
            transition: {
                duration: 0.2,
            },
        },
        focused: {
            scale: 1.1,
            background: "#fff",
            transition: {
                duration: 0.2,
            },
        },
    }

    const { isFocused, ref } = useFocus()

    return (
        <Frame
            ref={ref}
            variants={variants}
            animate={isFocused ? "focused" : "initial"}
            size="100%"
        />
    )
}

Using the Gamepad standalone

If you want to listen to all gamepadevents regardless of the focus-state on a component, there's a simple Gamepad class available.

import { Gamepad } from 'joystick-react';

// The Gamepad-constructor takes a boolean as its first parameter, which dictates if the events should be throttled or not
// Set it to true if you want keyboard-like event emitting - very useful if you want to ensure 1 event when pressing a button
// Set it to false if you want realtime events - very useful if you want to get responsive data from the gamepad "sticks"
const gamepad = new Gamepad(true);

gamepad.on('gamepadevent', event => console.log(event));