rw.props

The rw.props object contains all the current values from your component's UI controls defined in properties.json.

Accessing Properties

Use destructuring to access individual property values:

const transformHook = (rw) => {
    const { title, isVisible, padding, backgroundColor } = rw.props;
    
    // Use the values
    console.log(title);       // "My Component"
    console.log(isVisible);   // true
    console.log(padding);     // 16
};

exports.transformHook = transformHook;

Property Types

The type of each property matches how it's defined in properties.json:

Control Type	JavaScript Type	Example Value
Text	string	"Hello World"
Number / Slider	number	42
Switch	boolean	true
Select / Segmented	string	"option1"
Color	string	"bg-blue-500"
Image / Resource	object	{ image: "path/to/image.jpg", width: 800, height: 600 }
Link	object	{ href: "/page", title: "Link", target: "_self" }

Example: Transforming Properties

const transformHook = (rw) => {
    const { 
        firstName, 
        lastName, 
        showFullName,
        fontSize 
    } = rw.props;
    
    // Combine properties
    const displayName = showFullName 
        ? `${firstName} ${lastName}` 
        : firstName;
    
    // Transform values
    const fontSizeClass = `text-${fontSize}`;
    
    rw.setProps({
        displayName,
        fontSizeClass
    });
};

exports.transformHook = transformHook;

All Properties Available

Every property defined in your properties.json is accessible via rw.props. If a property has a default value and hasn't been changed, the default value will be returned.

const transformHook = (rw) => {
    // Log all available properties
    console.log(rw.props);
    
    // Access any property by its "property" key from properties.json
    const { myCustomProperty } = rw.props;
};

exports.transformHook = transformHook;