rw.setProps

The rw.setProps() function passes data from your hook to your templates. Any data passed becomes available as template variables.

Syntax

rw.setProps({
    key: value,
    anotherKey: anotherValue
});

Basic Examples

Simple Values

const transformHook = (rw) => {
    rw.setProps({
        message: 'Hello, World!',
        count: 42,
        isVisible: true
    });
};

exports.transformHook = transformHook;

In templates:

<p>{{message}}</p>
<span>Count: {{count}}</span>
@if(isVisible)
    <div>Visible content</div>
@endif

Arrays

const transformHook = (rw) => {
    rw.setProps({
        team: ["Ben", "Dan", "Tom"],
        numbers: [1, 2, 3, 4, 5]
    });
};

exports.transformHook = transformHook;

In templates:

<ul>
    @each(member in team)
        <li>{{member}}</li>
    @endeach
</ul>

Objects

const transformHook = (rw) => {
    rw.setProps({
        apps: {
            elements: {
                slogan: "Build beautiful websites. No code required.",
                isAmazing: true
            },
            squash: {
                slogan: "Batch Photo Editor",
                isAmazing: true
            }
        }
    });
};

exports.transformHook = transformHook;

In templates:

<p>{{apps.elements.slogan}}</p>
@if(apps.elements.isAmazing)
    <span>Amazing!</span>
@endif

Common Patterns

Passing Transformed Props

const transformHook = (rw) => {
    const { firstName, lastName, price, quantity } = rw.props;
    
    rw.setProps({
        fullName: `${firstName} ${lastName}`,
        total: price * quantity,
        formattedTotal: `$${(price * quantity).toFixed(2)}`
    });
};

exports.transformHook = transformHook;

Conditional Values

const transformHook = (rw) => {
    const { size, customSize } = rw.props;
    
    rw.setProps({
        displaySize: customSize || size,
        hasCustomSize: !!customSize
    });
};

exports.transformHook = transformHook;

Spreading Collections

const transformHook = (rw) => {
    // Pass all collections to templates
    rw.setProps({
        ...rw.collections
    });
};

exports.transformHook = transformHook;

Building CSS Classes

const transformHook = (rw) => {
    const { padding, margin, rounded, shadow } = rw.props;
    
    const classes = [
        padding,
        margin,
        rounded && 'rounded-lg',
        shadow && 'shadow-md'
    ].filter(Boolean).join(' ');
    
    rw.setProps({
        classes
    });
};

exports.transformHook = transformHook;

Multiple Calls

You can call setProps multiple times. Properties are merged:

const transformHook = (rw) => {
    rw.setProps({
        title: 'Hello'
    });
    
    // This adds to existing props, doesn't replace them
    rw.setProps({
        subtitle: 'World'
    });
    
    // Both title and subtitle are now available in templates
};

exports.transformHook = transformHook;

Passing Context Objects

const transformHook = (rw) => {
    rw.setProps({
        project: rw.project,
        page: rw.page,
        component: rw.component
    });
};

exports.transformHook = transformHook;