Giter Club home page Giter Club logo

Comments (1)

miker2049 avatar miker2049 commented on August 12, 2024 2

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();
      ...

from imgui-js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.