Advanced Property Integration

Elements Component Development
1

How would one go about adding the Advanced property block to a custom component?

What is involved in hooking it up so that any Tailwind classes that are added are applied?

It would be convenient to see an example of how these properties are hooked up.

2

All we’re doing is using a textArea and applying that property value to an HTML element, there’s nothing fancy going on!

So, given you have a textArea property with the id of classes you can apply that to your template like so:

<div class="{{classes}}">
    ...
</div>
3

I assume the same thing is being done with the ID as well, correct?

<div id="{{componentID}}">
    ...
</div>
4

Correct! Note though, that if you want to have that component to be linkable from the link sheet, you’ll need to use the rw.addAnchor(componentID); in your hooks.

That will make the component linkable from within the Anchor select menu when linking:

CleanShot 2025-08-01 at 09.10.21@2x
CleanShot 2025-08-01 at 09.10.21@2x1022×634 92.8 KB

It’s a little bit more advanced, so here’s a full hooks.js file we use on a component, this also uses the rw.setRootElement() method (which needs better documentation, but does what you might expect):

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

  // allows you to control the outermost
  // HTML element for this component
  rw.setRootElement({
    as: "div", // could be nav, section, etc..
    class: classes,
    args: {
      id: customID
    },
  });

  // This makes the component linkable via
  // the "Anchor" dropdown in Link sheets
  if (customID.length > 0) {
    rw.addAnchor(globalID);
  }

  rw.setProps({ classes });
};

exports.transformHook = transformHook;
1 Like