Consider adding labels to folders

[xJkit]

At this moment, to display a custom control title, adding a custom label rather than a object key name is like this:

useControls({
    backgroundColor: {
      label: 'Background', // custom label name
      value: '#111111',
    },
    isAxesHelper: {
      label: 'Axes', // custom label name
      value: true,
    },
})

However, adding a label on a folder is not working:

useControls({
  materials: folder({
    label: 'THIS IS A LABEL NAME', // label name
    materialKind: {
      label: 'Kind',
      value: MATERIAL_KIND.standard,
      options: {
        'Basic Material': MATERIAL_KIND.basic,
        'Normal Material': MATERIAL_KIND.normal,
      },
    },
  })
})

I also tried this:

useControls({
  materials: {
    label: 'THIS IS A LABEL NAME', // label name
    value: folder({
      materialKind: {
        label: 'Kind',
        value: MATERIAL_KIND.standard,
        options: {
          'Basic Material': MATERIAL_KIND.basic,
          'Normal Material': MATERIAL_KIND.normal,
        },
      },
    })
  }
})

Is there any plan to name a folder? Or to add a custom render function?

Thanks for this awesome library!

[dbismut]

Hi @xJkit, sorry for the delay. Indeed, we could add label as an option to the folder. It would probably be something like:

useControls({ myFolder: folder({ materialKind: 'blue' }, { label: 'My custom folder label' }) })

In the meantime you can probably do something like:

useControls({ "My custom folder label" : folder({ materialKind: 'blue' }})