Position the Leva UI within a DIV

[rmrbytes]

I am using this beautifully designed UI component in a react three js environment. The scene has multiple geometries with some attributes all controlled by Leva. I find by default the Leva UI component is on the top right of the whole page. I would like it to be within the canvas parent div. How do I achieve it?

Thanks.

[rudolphmax]

Sure! Use the Leva component.

import { Leva } from 'leva'

const ControlsComponent = ( { props } : ControlsComponentProps) => {
  const { width } = useControls('Width', {
    width: { value: 20, min: 1, max: 90 }
  })

  return (
    <Leva
      fill
      titleBar={ drag: false }}
    />
  )
}

Here, I am also setting it to fill its parent and disabling dragging (I use it as part of a sidebar).