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}
/>