1 of 21

Hooks.js

Hooks provide a powerful way to extend your components by manipulating properties before they are applied within templates.

The typical flow of a component follows this sequence: properties → hooks → template. Hooks process and refine properties, allowing you to perform complex logic before passing them into the template for rendering.

Each component has its own unique hooks.js file. To share code across multiple components, refer to shared hooks.

To use a transform hook, create a hooks.jsfile in the root of your component with this code.

// Create a function called transformHook that receives the rw API object
const transformHook = (rw) => {

    // Use the API to set a property called message to "Hooks are awesome!"
    rw.setProps({
        message: "Hooks are awesome!"
    });
};

// Register the transformHook function with Elements
exports.transformHook = transformHook;

Next, add this to the template.html file in the component templates directory.

<div class="p-6 text-black-600 text-center">
    {{message}}
</div>

Global Properties

Property Name

Type

Values

rw:mode

string

edit or preview

Available Context methods

Method Name

Type

Values

getValues

getClassNames

getResponsiveValues

getBreakpoints

getBreakpointNames

Setting Values

in hooks.js

// Set values in the context
context.setValues({
    "obj": {
        "name" : "Mario",
        "job" : {
            "title" : "Plumber"
        }
    }
})

in template.html

<p><strong>{{obj.name}}</strong> - {{obj.job.title}}</p>

The rendered output would look something like this:

Mario - Plumber

Transform Hook

The transform hook allows you to get and set property values before they're used in templates. Let's assume you have the following slider defined in your properties and you're using the value in a template.

// properties.json
{
    "title" : "Padding",
    "property" : "padding",
    "default" : 5,
    "slider": {
        "min" : 0,
        "max" : 12,
        "round" : true
    }
}

// template.html
The slider is {{padding}}

When the slider is set to 5, the output would be

The slider is 5

Now lets add a transform hook that multiplies the padding value by 2

const transformHook = (rw) => {
  const {
    padding,
  } = rw.props;

  rw.setProps({
    padding: padding*2,
  });
};

exports.transformHook = transformHook;

With the slider still set to 5, when the template is processed the output will be

The slider is 10

This becomes incredibly powerful and convenient when you need to perform logic based on multiple properties. The following example show how you might generate a list of css classes based on standard or custom settings.

const transformHook = (rw) => {
  const {
    customSizing,     // Checkbox
    size,             // Slider 
    fontSize          // Slider 
    paddingTop        // Slider 
    paddingRight      // Slider 
    paddingBottom     // Slider 
    paddingLeft       // Slider
  } = rw.props;
  
  const sizeClasses = [
    // Included if customSizing == false
    !customSizing && size,
    
    // Included if customSizing == true
    customSizing && fontSize,
    customSizing && paddingTop,
    customSizing && paddingRight,
    customSizing && paddingBottom,
    customSizing && paddingLeft,
  ]
    .filter(Boolean)
    .join(" ");

  rw.setProps({
    classes: sizeClasses,
  });
};

exports.transformHook = transformHook;

The template simply uses the classes property instead of attempting to handle all options from 7 different properties. For example

<div class="{{classes}}"><div>

Common use cases

Passing data to templates

Working with Collections

const transformHook = (rw) => {
    rw.setProps({
        // Very important to have access to the collections in the template.
        ...rw.collections
    })
}
exports.transformHook = transformHook;

Working with UI Controls

Working with Resources

Available Functions

rw.addAnchor

rw.addAnchor("myAnchor");

rw.getBreakpoints

rw.getBreakpointNames

rw.getResponsiveValues

rw.resizeResource

rw.setProps

rw.setRootElement

Available Data

Access Project Properties

Various properties from the current environment can be used within templates but access must be granted through the setProps command in the hooks.js file first.

const transformHook = (rw) => {    
    // Make sure we have access to properties within the template
    rw.setProps({
        project: rw.project,
        page: rw.page,
        node: rw.node,
        element: rw.element
    })
}

exports.transformHook = transformHook;

With this in place, we gain access to the following within template files.

Project Properties

Property Name

Type

Description

{{project.siteURL}}

String

{{project.mode}}

String

{{project.title}}

String

{{project.slogan}}

String

{{project.copyright}}

String

{{project.email}}

String

{{project.contactText}}

String

{{project.enableSocialTags}}

Boolean

{{project.language}}

String

{{project.logo.url}}

String

{{project.logo.alt}}

String

Page Properties

Property Name

Type

Description

{{page.title}}

String

{{page.description}}

String

{{page.id}}

String

{{page.language}}

String

{{page.filename}}

String

{{page.ext}}

String

{{page.absolutePath}}

String

{{page.docRootPath}}

String

{{page.resourcesPath}}

String

Node Properties

Property Name

Type

Description

String

Element Properties

Property Name

Type

Description

String

rw.collections

rw.component

rw.node

rw.pages

The following template example will output the page (and folder) details for all the pages in a project.

@each(page in pages)
    {{page.title}}
    {{page.isPublished}}
    {{page.displayInMenu}}
    {{page.url}}
    {{page.isActive}}
    {{page.isExternalPage}}
    {{page.pageDepth}}
    {{page.openInNewWindow}}
    {{page.icon}}
    {{page.hasPages}}
    {{page.hasActiveChild}}

    @each(childpage in page.pages) 
        {{childpage.title}} 
    @endeach
@endeach

Before you can access the page properties you'll need to include the following code in the Hooks.js

const transformHook = (rw) => {    
    // Get pages from rw
    const pages = rw.pages
    
    // Set pages in our template data
    rw.setProps({ 
        pages
    })
}

exports.transformHook = transformHook;

rw.project

rw.props

Available Data

Access Project Properties

Various properties from the current environment can be used within templates but access must be granted through the setProps command in the hooks.js file first.

const transformHook = (rw) => {    
    // Make sure we have access to properties within the template
    rw.setProps({
        project: rw.project,
        page: rw.page,
        node: rw.node,
        element: rw.element
    })
}

exports.transformHook = transformHook;

With this in place, we gain access to the following within template files.

Project Properties

Property Name

Type

Description

{{project.siteURL}}

String

{{project.mode}}

String

{{project.title}}

String

{{project.slogan}}

String

{{project.copyright}}

String

{{project.email}}

String

{{project.contactText}}

String

{{project.enableSocialTags}}

Boolean

{{project.language}}

String

{{project.logo.url}}

String

{{project.logo.alt}}

String

Page Properties

Property Name

Type

Description

{{page.title}}

String

{{page.description}}

String

{{page.id}}

String

{{page.language}}

String

{{page.filename}}

String

{{page.ext}}

String

{{page.absolutePath}}

String

{{page.docRootPath}}

String

{{page.resourcesPath}}

String

Node Properties

Property Name

Type

Description

String

Element Properties

Property Name

Type

Description

String

Hooks.js

Hooks provide a powerful way to extend your components by manipulating properties before they are applied within templates.

Each component has its own unique hooks.js file. To share code across multiple components, refer to shared hooks.

To use a transform hook, create a hooks.jsfile in the root of your component with this code.

// Create a function called transformHook that receives the rw API object
const transformHook = (rw) => {

    // Use the API to set a property called message to "Hooks are awesome!"
    rw.setProps({
        message: "Hooks are awesome!"
    });
};

// Register the transformHook function with Elements
exports.transformHook = transformHook;

Next, add this to the template.html file in the component templates directory.

<div class="p-6 text-black-600 text-center">
    {{message}}
</div>

Global Properties

Property Name

Type

Values

rw:mode

string

edit or preview

Available Context methods

Method Name

Type

Values

getValues

getClassNames

getResponsiveValues

getBreakpoints

getBreakpointNames

Setting Values

in hooks.js

// Set values in the context
context.setValues({
    "obj": {
        "name" : "Mario",
        "job" : {
            "title" : "Plumber"
        }
    }
})

in template.html

<p><strong>{{obj.name}}</strong> - {{obj.job.title}}</p>

The rendered output would look something like this:

Mario - Plumber

Transform Hook

// properties.json
{
    "title" : "Padding",
    "property" : "padding",
    "default" : 5,
    "slider": {
        "min" : 0,
        "max" : 12,
        "round" : true
    }
}

// template.html
The slider is {{padding}}

When the slider is set to 5, the output would be

The slider is 5

Now lets add a transform hook that multiplies the padding value by 2

const transformHook = (rw) => {
  const {
    padding,
  } = rw.props;

  rw.setProps({
    padding: padding*2,
  });
};

exports.transformHook = transformHook;

With the slider still set to 5, when the template is processed the output will be

The slider is 10

const transformHook = (rw) => {
  const {
    customSizing,     // Checkbox
    size,             // Slider 
    fontSize          // Slider 
    paddingTop        // Slider 
    paddingRight      // Slider 
    paddingBottom     // Slider 
    paddingLeft       // Slider
  } = rw.props;
  
  const sizeClasses = [
    // Included if customSizing == false
    !customSizing && size,
    
    // Included if customSizing == true
    customSizing && fontSize,
    customSizing && paddingTop,
    customSizing && paddingRight,
    customSizing && paddingBottom,
    customSizing && paddingLeft,
  ]
    .filter(Boolean)
    .join(" ");

  rw.setProps({
    classes: sizeClasses,
  });
};

exports.transformHook = transformHook;

The template simply uses the classes property instead of attempting to handle all options from 7 different properties. For example

<div class="{{classes}}"><div>