@anton.bobrov/react-dat-gui NPM

`@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.

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.

react dat.gui gui datgui settings-panel control-panel dat-gui-integration ui-controls parameter-control

@anton.bobrov/react-hooks @types/dat.gui dat.gui

@everything-registry/sub-chunk-70

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

@anton.bobrov/react-dat-gui v3.1.13