react-gamecube

React component for displaying Gamecube controller inputs

For an interactive demo with examples, check out the storybook.

Installation

With NPM

npm install react-gamecube

With Yarn

yarn add react-gamecube

Usage

const { Controller } = require("react-gamecube");
// Or import like this:
// import { Controller } from "react-gamecube";
 
// Make the buttons Z, R, and A pressed
const value = {
  a: true,
  r: true,
  z: true,
}
 
// Also hide the analog sticks
<Controller value={value} hideAnalogSticks={true} />

Props

value

• Type: object
• Required: No

An object containing which buttons have been pressed. See below for all the different attributes.

Button	Type	Description
start	boolean	Start button
a	boolean	A button
b	boolean	B button
x	boolean	X button
y	boolean	Y button
dd	boolean	Dpad down
dl	boolean	Dpad left
dr	boolean	Dpad right
du	boolean	Dpad up
l	boolean	Left trigger
r	boolean	Right trigger
z	boolean	Z trigger
lValue	number	Left trigger analog value. Must be between 0 and 1.
rValue	number	Right trigger analog value. Must be between 0 and 1.
controlX	number	Analog stick X value. Must be between -1 and 1.
controlY	number	Analog stick Y value. Must be between -1 and 1.
cStickX	number	C stick X value. Must be between -1 and 1.
cStickY	number	C stick Y value. Must be between -1 and 1.

hideAnalogSticks

• Type: boolean
• Required: No
• Default: false

Hides both the analog stick and the C stick.

hideButtonText

• Type: boolean
• Required: No
• Default: false

Hides the text on the buttons.

onClick

• Type: (button: string) => void
• Required: No

A function which determines what logic should occur when a particular button is pressed.

Button	Description
"START"	Start button
"A"	A button
"B"	B button
"X"	X button
"Y"	Y button
"D_LEFT"	Dpad left
"D_RIGHT"	Dpad right
"D_DOWN"	Dpad down
"D_UP"	Dpad up
"L"	L trigger
"R"	R trigger
"Z"	Z trigger

Development

Build

To build the component library, run:

yarn run build

To start the storybook server, run:

yarn run start

Test

To run the tests:

yarn run test

Export Storybook

To export the storybook as static files:

yarn run storybook

You can then serve the files under storybook-static for demonstration.

License

This software is released under the terms of MIT license.