README
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));