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 Container element that is black by default turns red when the user hovers and is green as long as the user clicks on it.

<Container
  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 { Container } from "@react-three/uikit";

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

Open Sandbox

Edit this page