1- import { useCallback , useEffect , useState } from "react" ;
1+ import { useCallback , useEffect , useState , RefObject } from "react" ;
22import GUI from "lil-gui" ;
33
4- export const useGUI = ( setupGUI : ( gui : GUI ) => void , title ?: string ) => {
4+ export const useGUI = ( setupGUI : ( gui : GUI ) => void , title ?: string , container ?: RefObject < HTMLDivElement > ) => {
55 const [ gui , setGUIState ] = useState < GUI | null > ( null ) ;
66
77 useEffect ( ( ) => {
@@ -10,6 +10,8 @@ export const useGUI = (setupGUI: (gui: GUI) => void, title?: string) => {
1010 closeFolders : true ,
1111 width : 240 ,
1212 title,
13+ autoPlace : container ?. current ? false : true ,
14+ container : container ?. current || undefined ,
1315 } ) ;
1416 setGUIState ( newGui ) ;
1517 setupGUI ( newGui ) ;
@@ -20,7 +22,7 @@ export const useGUI = (setupGUI: (gui: GUI) => void, title?: string) => {
2022 setGUIState ( null ) ;
2123 }
2224 } ;
23- } , [ gui , setupGUI , title ] ) ;
25+ } , [ gui , setupGUI , title , container ] ) ;
2426
2527 const updateDisplays = useCallback ( ( ) => {
2628 gui ?. folders . forEach ( ( folder ) =>
0 commit comments