ID

Add an ID property to your component so designers can set unique identifiers on HTML elements.

The ID prop creates a text input for element IDs, making it easy to target elements with CSS or JavaScript.

Syntax

1
// Prop definition
2
props.Id({
3
    name: string,
4
    group?: string,
5
    tooltip?: string,
6
})
7
8
// Prop value
9
string

Prop definition

Define the ID prop in your Webflow code component with a name. Optionally, you can add a group and tooltip text.

1
props.Id({
2
    name: string,
3
    group?: string,
4
    tooltip?: string,
5
})

Properties

• name: The name for the property.
• group: The group for this property (optional).
• tooltip: The tooltip for this property (optional).

Example

1
import { declareComponent } from '@webflow/react';    
2
import { props } from '@webflow/data-types';
3
import { MyComponent } from "./MyComponent";
4
5
export default declareComponent(MyComponent,    {
6
    name: "MyComponent",
7
    description: "A component with an ID property",
8
    props: {
9
        id: props.Id({
10
            name: "Element ID",
11
            group: "Info"
12
        })
13
    }
14
});

Prop value

The ID prop provides a string to your React component:

1
string