Simple directional joystick for react
npm install react-directionalThis is a simple directional controller, using an SVG, for react.
You can see a demo here.
Really, this component can be thought of "use an SVG to manage a bunch of buttons", and the fact that it's a little nintendo-style directional-controller is just because that is what I first wanted to use it for.
``sh`
npm i react-directional
Now, you can use it in your code:
`jsx
import React from 'react'
import Directional from 'react-directional'
export default () => {
const onDirection = (direction, pressed) => {
console.log(direction, pressed)
}
return
}
`
There are a few ways to customize the output.
If you make an inline SVG with the correct classes on some buttons, it will work:
`jsx
import React from 'react'
import Directional from 'react-directional'
export default () => {
const onDirection = (direction, pressed) => {
console.log(direction, pressed)
}
return(
)
}
`
In this case, the buttons are elements that have the classes in the classes prop.
You can also use standard SVG css-styling, as I did in the demo
I highly recommend using svgr to reactize the SVG, as it makes it much easier to manage & edit the look, but be aware that it adds prefixes to classes, which is my default classes are like this:
`js``
{
up: 'look_svg__up',
down: 'look_svg__down',
left: 'look_svg__left',
right: 'look_svg__right'
}