Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for nested controls #2

Open
ItsJonQ opened this issue Dec 9, 2019 · 0 comments
Open

Add support for nested controls #2

ItsJonQ opened this issue Dec 9, 2019 · 0 comments
Labels
enhancement New feature or request

Comments

@ItsJonQ
Copy link
Owner

ItsJonQ commented Dec 9, 2019

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>
}
@ItsJonQ ItsJonQ added the enhancement New feature or request label Dec 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant