Interactivity

How to make the UI elements interactive.

Every UI component can receive the same events as any other R3F element. In addition to these event listeners, uikit provides properties such as hover and active for all components. These properties allow the element to overwrite other properties if it is hovered or clicked.

The following example shows a Root element that is black by default turns red when the user hovers and is green as long as the user clicks on it.

<Root
  backgroundColor="black"
  hover={{ backgroundColor: 'red' }}
  active={{ backgroundColor: 'green' }}
  sizeX={1}
  sizeY={1}
/>

import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { Root, Container } from "@react-three/uikit";

export default function App() {
return (
  <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
    <OrbitControls />
    <Root
      backgroundColor="black"
      hover={{ backgroundColor: 'red' }}
      active={{ backgroundColor: 'green' }}
      sizeX={1}
      sizeY={1}
  />
  </Canvas>
)
}

Open Sandbox

Edit this page