ItsJonQ/controls

Add support for nested controls

Opened this issue · 0 comments

It would be cool if to add nested controls support using dot notation (.) when using a knob from useControls(), example:

import React from 'react'
import { useControls } from '@itsjonq/controls'

const Example = () => {
  const { text } = useControls()

  text('Button.mainColor', 'red')

  return <div>...</div>
}

This would render a UI like this (within the <Controls />)

Button

<input type="text" value="red" />

The UI can be collapsible, but should not be collapsed by default. This will allow for fields to be better organized :).

There should be a limitation though... It can only nest 1 level deep.


Accessing the attributes can use the dot notation as well, example:

import React from 'react'
import { useControls } from '@itsjonq/controls'

const Example = () => {
  const { text, attributes } = useControls()

  text('Button.mainColor', 'red')

  const value = attributes.Button.mainColor

  return <div>...</div>
}

Maybe we can provide a special get method as well, example:

import React from 'react'
import { useControls } from '@itsjonq/controls'

const Example = () => {
  const { text, get } = useControls()

  text('Button.mainColor', 'red')

  const value = get('Button.mainColor')

  return <div>...</div>
}