# Advanced Property Integration

**URL:** <https://forums.realmacsoftware.com/t/advanced-property-integration/49374>\
**Category:** Elements API\
**Created:** [August 1, 2025, 1:09am UTC](https://forums.realmacsoftware.com/t/advanced-property-integration/49374 "2025-08-01T01:09:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [August 1, 2025, 1:09am UTC](https://forums.realmacsoftware.com/t/advanced-property-integration/49374/1 "2025-08-01T01:09:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [August 1, 2025, 6:53am UTC](https://forums.realmacsoftware.com/t/advanced-property-integration/49374/2 "2025-08-01T06:53:43Z")

</div>

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:

```auto
<div class="{{classes}}">
    ...
</div>

```

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [August 1, 2025, 7:07am UTC](https://forums.realmacsoftware.com/t/advanced-property-integration/49374/3 "2025-08-01T07:07:30Z")

</div>

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

```auto
<div id="{{componentID}}">
    ...
</div>

```

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [August 1, 2025, 7:15am UTC](https://forums.realmacsoftware.com/t/advanced-property-integration/49374/4 "2025-08-01T07:15:52Z")

</div>

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](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/8/a8dc7f312a542597f6a5abe298c3db29045d08cb.png)

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):

```javascript
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;

```