@coconut-xr/input
input fields for 3D UIs with @coconut-xr/koestlich
npm i @coconut-xr/input
Usage
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.