@coconut-xr/input

input fields for 3D UIs with @coconut-xr/koestlich

npm i @coconut-xr/input

Usage

CodeSandbox

const [text1, setText1] = useState("Input Field");
const [text2, setText2] = useState("Text Area\nMultiline");
return (
  <Canvas {...inputCanvasProps}>
    <OrbitControls enableRotate={false} />
    <RootContainer backgroundColor="green" loadYoga={loadYoga}>
      <Input value={text1} onChange={setText1} />
      <TextArea value={text2} onChange={setText2} />
    </RootContainer>
  </Canvas>
);

inputCanvasProps sets onPointerDown on the canvas to prevent the default behavior which is required to prevent deselecting the currently selected input field.