How to import imgui-js properly in a ReactJS project

[SrinSS01]

I imported the package as instructed in the README.md file,

import * as ImGui from 'imgui-js';

but it gives the following error:

Cannot find module 'imgui-js' or its corresponding type declarations. ts(2307)

[miker2049]

Try either changing the main field in the package.json to:

"main": "dist/imgui.umd.js"

or, importing like:

import * as ImGui from 'imgui-js/dist/imgui.umd'

I have opened up #55 to see if we can make better defaults.

And by the way, I am also using this in React and there is definitely some tricky stuff you need to do to get it to work. A snippet:

    const ref = useCallback((cnv: HTMLCanvasElement) => {
        ; (async () => {
            if (cnv) {
                cnv.width = 512
                cnv.height = 512
                cnv.style.background = 'transparent'
                cnv.style.backgroundColor = 'rgba(100,1,1,1)'
                await ImGui.default()
                ImGui.CreateContext()
                ImGui_Impl.Init(cnv)
                ready.current = true
                console.log('created')
                animRef.current = requestAnimationFrame(_guiFrame)
            }
        })()
    }, [])


    useEffect(() => {
        return () => {
            cancelAnimationFrame(animRef.current)
            ready.current = false
            ImGui_Impl.Shutdown()
            ImGui.DestroyContext()
            console.log('destruction')
        }
    }, [])

Where ref goes to your canvas element, and and _guiFrame is your render loop guarded at the top with ready:

    const _guiFrame = (time: number) => {
        if (ready.current) {
            impl.NewFrame(time);
            ImGui.NewFrame();
      ...