Hooks
useControl

useControl

Get the control values from the user. You can create the controls in the control panels.

Boolean

import { useControl } from './effect-control'
 
function Component() {
  const { myBoolean } = useControl('group-control-id')
 
  console.log(myBoolean)
  // Output:
  // true/false
}

Image

import { useControl } from './effect-control'
 
function Component() {
  const { myImage } = useControl('group-control-id')
}
  console.log(myImage)

Output:

{
  src: 'https://cdn.image.com/example.png',
  // From image size
  height: 1000,
  width: 1000,
}

Color

import { useControl } from './effect-control'
 
function Component() {
  const { myColor } = useControl('group-control-id')
}
  console.log(myColor)

Output:

{
  hex: '#ffffff',
  hexa: '#ffffffff',
  rgb: {
    r: 255, // From 0 to 255
    g: 255,
    b: 255,
  },
  rgba: {
    r: 255,
    g: 255,
    b: 255,
    a: 1,  // From 0 to 1
  },
  hsl: {
    h: 360, // From 0 to 360 
    s: 100, // From 0 to 100
    l: 100,
  },
  hsla: {
    h: 360,
    s: 100,
    l: 100,
    a: 1,
  },
}

Number

import { useControl } from './effect-control'
 
function Component() {
  const { myNumber } = useControl('group-control-id')
 
  console.log(myNumber)
  // Output:
  // 2
}

Select

import { useControl } from './effect-control'
 
function Component() {
  const { mySelect } = useControl('group-control-id')
 
  console.log(mySelect)
  // Output:
  // 'Option 1'
}

Slider

import { useControl } from './effect-control'
 
function Component() {
  const { mySlider } = useControl('group-control-id')
 
  console.log(mySlider)
  // Output:
  // 2
}

Text

import { useControl } from './effect-control'
 
function Component() {
  const { myText } = useControl('group-control-id')
 
  console.log(myText)
  // Output:
  // 'Hello world'
}
useCanvasPropsuseDefaultCamera