@anton.bobrov/react-dat-gui
v3.1.14
Published
React adaptation of [dat.GUI](https://www.npmjs.com/package/dat.gui)
Downloads
319
Maintainers
anton.bobrovReadme
@anton.bobrov/react-dat-gui
React adaptation of dat.GUI, a lightweight graphical user interface for changing variables in JavaScript. This library allows easy integration of dat.GUI into your React applications with a simple API.
Links
Installation
To install the package, use npm:
npm i "@anton.bobrov/react-dat-gui"React Usage
Creating a Folder
You can create a dat.GUI folder in your React component using the useDatGuiFolder hook:
const folder = useDatGuiFolder({ name: 'GUI Folder' });Creating Settings
You can define GUI settings and parameters using the useDatGuiSettings hook:
const { defaults } = useDatGuiSettings({
name: 'GUI Folder',
parent: guiParentFolder, // To nest the settings under a parent folder
data: {
color: 0xff0000,
intensity: 0.5,
isVisible: true,
},
parameters: {
color: { type: 'color' },
intensity: { type: 'number', min: 0, max: 1, step: 0.1 },
isVisible: { type: 'boolean' },
},
onChange(current) {
console.log(defaults, current);
},
});Vanilla JavaScript Usage
Accessing dat.GUI
You can access the dat.GUI instance using the datGUI promise:
datGUI.then((gui) => {
if (gui) {
// Use dat.GUI
}
});Creating a Folder
To create a folder using vanilla JavaScript:
const instance = createDatGuiFolder({
name: 'GUI Folder',
onCreate: (folder) => console.log(folder),
});
// Destroy the folder when needed
instance.destroy();Creating Settings
To create GUI settings and configure their parameters:
const instance = createDatGuiSettings({
name: 'GUI Folder',
parent: guiParentFolder, // To nest settings under a parent folder
data: {
color: 0xff0000,
intensity: 0.5,
isVisible: true,
},
parameters: {
color: { type: 'color' },
intensity: { type: 'number', min: 0, max: 1, step: 0.1 },
isVisible: { type: 'boolean' },
},
onChange(current) {
console.log(instance.defaults, current);
},
});
// Destroy the settings when needed
instance.destroy();Disabling dat.GUI
To disable dat.GUI, you can add the following script to your HTML <head> section:
<script>
window.USE_DAT_GUI = false;
</script>Global Settings
If you want to keep the dat.GUI panel open by default, use the following script:
<script>
window.OPEN_DAT_GUI = true;
</script>License
This project is licensed under the terms of the MIT license.