pmndrs/uikit

The AlertDialog component in @react-three/uikit-default allows you to create modal dialogs within a React Three Fiber canvas. It uses a trigger-based pattern where an AlertDialogTrigger controls the visibility of an AlertDialog via a signal or reference.

To implement an Alert Dialog:

1. Create a signal (e.g., using @preact/signals-core) to hold the VanillaDialog instance.
2. Wrap your trigger element (like a Button) in an AlertDialogTrigger and pass the signal to the dialog prop.
3. Define the AlertDialog component and use a ref callback to update your signal with the dialog instance.
4. Compose the dialog content using AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, and AlertDialogAction.

import { useMemo } from 'react'
import { signal } from '@preact/signals-core'
import { Text } from '@react-three/uikit'
import {
  Button,
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  VanillaDialog,
} from '@react-three/uikit-default'

function AlertDialogDemo() {
  // 1. Create a signal to manage the dialog instance
  const ref = useMemo(() => signal<VanillaDialog | undefined>(undefined), [])

  return (
    <>
      {/* 2. The trigger component that opens the dialog */}
      <AlertDialogTrigger dialog={ref}>
        <Button variant="outline">
          <Text>Show Dialog</Text>
        </Button>
      </AlertDialogTrigger>

      {/* 3. The dialog component itself, linked via ref */}
      <AlertDialog ref={(dialog) => void (ref.value = dialog ?? undefined)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>
              <Text>Are you absolutely sure?</Text>
            </AlertDialogTitle>
            <AlertDialogDescription>
              <Text>
                This action cannot be undone. This will permanently delete your account.
              </Text>
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>
              <Text>Cancel</Text>
            </AlertDialogCancel>
            <AlertDialogAction>
              <Text>Continue</Text>
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}

You can override the default background and border materials for Text, Container, and Image components by providing a custom material class via the panelMaterialClass prop. This is useful for applying complex materials like MeshPhysicalMaterial or customized MeshPhongMaterial to UI elements.

To use a custom material:

1. Create a class that extends a Three.js material (e.g., MeshPhongMaterial).
2. Pass this class to the panelMaterialClass prop of the component.

Additionally, you can use the borderBend property to bend the normals on the border, which can be used to create 3D illusions efficiently.

import { Text } from '@react-three/uikit'
import { MeshPhongMaterial } from 'three'

class FancyMaterial extends MeshPhongMaterial {
  constructor() {
    super({
      specular: 0x111111,
      shininess: 100,
    })
  }
}

export default function App() {
  return (
    <Text
      backgroundColor="black"
      color="white"
      padding={24}
      borderRadius={32}
      fontSize={32}
      borderColor="black"
      borderBend={0.3}
      borderWidth={8}
      panelMaterialClass={FancyMaterial}
    >
      I look fancy
    </Text>
  )
}

The RadioGroup component from @react-three/uikit-default allows you to create a group of selectable radio items.

To implement it:

1. Wrap your items in a <RadioGroup> component. Use the defaultValue prop to set the initial selected value.
2. Define individual options using <RadioGroupItem> components, providing a unique value prop to each.
3. Place content (such as <Label> and <Text>) inside the <RadioGroupItem> to define the visual representation of the option.

import { RadioGroup, RadioGroupItem, Label } from '@react-three/uikit-default'
import { Text } from '@react-three/uikit'

function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="comfortable">
      <RadioGroupItem value="default">
        <Label>
          <Text>Default</Text>
        </Label>
      </RadioGroupItem>
      <RadioGroupItem value="comfortable">
        <Label>
          <Text>Comfortable</Text>
        </Label>
      </RadioGroupItem>
      <RadioGroupItem value="compact">
        <Label>
          <Text>Compact</Text>
        </Label>
      </RadioGroupItem>
    </RadioGroup>
  )
}