Visibility

Add a Visibility property to your component to choose whether to show or hide elements in Webflow.

Syntax

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

Prop definition

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

1
props.Visibility({
2
    name: string,
3
    group?: string,
4
    tooltip?: string,
5
    defaultValue?: boolean,
6
})

Properties

• name: The name for the property.
• group: The group for this property. (optional)
• tooltip: The tooltip for the property. (optional)
• defaultValue: Default visibility state. (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 a Visibility property",
8
    props: {
9
        isVisible: props.Visibility({
10
            name: "Show Element",
11
            group: "Display",
12
            defaultValue: true
13
        })
14
    }
15
});

Prop value

The Visibility prop provides a boolean value to your React component.

1
boolean