react-directional

This 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.

usage

``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'
}
``