ReferenceUtilities

Define a code component

declareComponent(Component, data)

The declareComponent function is used to create a code component declaration. See the declare code component guide for more information.

Syntax

1declareComponent(Component, data): void;

Parameters

  • Component: The React component to declare
  • Data: An object with: Component metadata, prop definitions, and optional configurations

Data object

The data object is used to define the component’s metadata, prop definitions, and optional configurations. It takes the following properties:

PropertyTypeDescription
namestringThe name of the component
description?stringA description of the component (optional)
group?stringGroup of the component in the component panel (optional)
propsobjectProps for the user to edit in Webflow. See the prop types reference for more information.
options?objectOptional configurations including applying tag selectors, and managing SSR.

Example

Button.webflow.tsx
1import { declareComponent } from '@webflow/react';
2import { props } from '@webflow/data-types';
3import { Button } from './Button';
4
5// Declare the component
6export default declareComponent(Button, {
7
8  // Component metadata
9  name: "Button",
10  description: "A button component with a text and a style variant",
11  group: "Interactive",
12
13  // Prop definitions
14  props: {
15    text: props.Text({ 
16        name: "Button Text",
17        defaultValue: "Click me"
18    }),
19    variant: props.Variant({ 
20        name: "Style", 
21        options: ["primary", "secondary"],
22        defaultValue: "primary"
23    }),
24  },
25  // Optional configuration
26  options: {
27    applyTagSelectors: true,
28  },
29});