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>
}
It would be cool if to add nested controls support using dot notation (
.) when using a knob fromuseControls(), example:This would render a UI like this (within the
<Controls />)Button
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
attributescan use the dot notation as well, example:Maybe we can provide a special
getmethod as well, example: