React 18 example

[maxjowett]

Is anyone able to run this library in React 18? If so could you provide an example?

[Spojowa]

You can try something like this:

import React, {useEffect, useRef, useState} from 'react'
import './App.css'
import {Fretboard, Position} from "@moonwave99/fretboard.js";

function App() {
    const fretboardRef = useRef<Fretboard>()
    const fretboardDomRef = useRef(null)

    const [lastPosition, setLastPosition] = useState<Position>({
        string: 1,
        fret: 1
    })

    useEffect(() => {
        if (fretboardRef.current == null) {
            fretboardRef.current = new Fretboard({
                el: fretboardDomRef.current,
                fretColor: 'blue',
                dotFill: 'red',
                dotText: (dot: Position) => dot.fret
            })
                .render()
                .on('mousemove', (position) => setLastPosition(position))
        } else {
            const fretboard = fretboardRef.current
            fretboard.clear()
                .setDots([lastPosition])
                .render()
        }
    })

    return (
        <>
            <figure ref={fretboardDomRef} style={{width: '800px'}}></figure>
        </>
    )
}

export default App