Get props (Beta)

1
component.getProps(): Promise<Prop[]>

1
interface Prop {
2
  /** Unique prop ID. */
3
  id: string;
4
  /** The prop type. */
5
  type: PropType;
6
  /** The binding value type, derived from the prop type. */
7
  valueType: BindableValueType;
8
  /** Value types that this prop can bind to. */
9
  bindableTo: readonly BindableValueType[];
10
  /** Display name. */
11
  name: string;
12
  /** Group name, or null if ungrouped. */
13
  group: string | null;
14
  /** Tooltip text, or null if not set. */
15
  tooltip: string | null;
16
  /** Default value, or null if not set. */
17
  defaultValue: unknown | null;
18
  // Type-specific settings, included when applicable:
19
  multiline?: boolean;   // textContent
20
  min?: number;          // number
21
  max?: number;          // number
22
  decimals?: number;     // number
23
  trueLabel?: string;    // boolean
24
  falseLabel?: string;   // boolean
25
}

1
const component = await webflow.getCurrentComponent()
2
3
if (component) {
4
  const props = await component.getProps()
5
  console.log(props)
6
  /*
7
  [
8
    {
9
      id: 'prop_1',
10
      type: 'textContent',
11
      valueType: 'textContent',
12
      bindableTo: ['string', 'textContent', 'altText', 'id'],
13
      name: 'Heading',
14
      group: 'Content',
15
      tooltip: 'The main heading displayed in the hero section',
16
      defaultValue: 'Welcome to our site'
17
    },
18
    {
19
      id: 'prop_2',
20
      type: 'imageAsset',
21
      valueType: 'imageAsset',
22
      bindableTo: ['image'],
23
      name: 'Background Image',
24
      group: 'Content',
25
      tooltip: null,
26
      defaultValue: null
27
    },
28
    {
29
      id: 'prop_3',
30
      type: 'link',
31
      valueType: 'link',
32
      bindableTo: ['link'],
33
      name: 'CTA Link',
34
      group: 'Content',
35
      tooltip: null,
36
      defaultValue: {
37
        mode: 'url',
38
        to: 'https://example.com/signup',
39
        openInNewTab: true
40
      }
41
    },
42
    {
43
      id: 'prop_4',
44
      type: 'number',
45
      valueType: 'number',
46
      bindableTo: ['number', 'string', 'textContent', 'altText', 'id'],
47
      name: 'Overlay Opacity',
48
      group: 'Settings',
49
      tooltip: null,
50
      defaultValue: 50,
51
      min: 0,
52
      max: 100,
53
      decimals: 0
54
    },
55
    {
56
      id: 'prop_5',
57
      type: 'boolean',
58
      valueType: 'boolean',
59
      bindableTo: ['boolean', 'string', 'altText', 'id'],
60
      name: 'Show CTA',
61
      group: 'Settings',
62
      tooltip: 'Toggle the call-to-action button',
63
      defaultValue: true,
64
      trueLabel: 'Visible',
65
      falseLabel: 'Hidden'
66
    },
67
    {
68
      id: 'prop_6',
69
      type: 'variant',
70
      valueType: 'variant',
71
      bindableTo: ['variant'],
72
      name: 'Color Scheme',
73
      group: null,
74
      tooltip: null,
75
      defaultValue: 'dark'
76
    },
77
    {
78
      id: 'prop_7',
79
      type: 'slot',
80
      valueType: 'slot',
81
      bindableTo: [],
82
      name: 'Footer Content',
83
      group: null,
84
      tooltip: null,
85
      defaultValue: null
86
    }
87
  ]
88
  */
89
90
  // Components with no props return an empty array
91
  const blankComponent = await webflow.getComponentByName('Empty Component')
92
  const emptyProps = await blankComponent?.getProps()
93
  console.log(emptyProps) // []
94
}