brianzinn / react-babylonjs

React for Babylon 3D engine
https://brianzinn.github.io/react-babylonjs/
818 stars 105 forks source link

Input Text field for the UI - React Babylon JS #154

Closed SurajMK94 closed 2 years ago

SurajMK94 commented 2 years ago

Hi team,

Is there a way to click a UI element and type the text using keyboard and save it?

Thanks and Regards, Suraj M K

brianzinn commented 2 years ago

https://codesandbox.io/s/snowy-voice-l1k3h?file=/src/App.tsx input-text-capture

If you are using a declarative GUI then it's the observable on the inputText control.

<inputText
    text="circle"
    color="white"
    fontSize={150}
    width={1.0}
    onTextChangedObservable={(ctl: InputText) =>
       console.log("new text:", ctl.text)
    }
 />
brianzinn commented 2 years ago

Please re-open if above solution does not work for you.

SurajMK94 commented 2 years ago

Thanks alot Brian. This solution worked like a magic.