React: Define custom component for Links about scale HOT 3 CLOSED

@acstll thank you for response,

actually for footerNavigation i was able to work around this using onClick prop

example link to playground i was able to intercept click event and trigger custom navigation function.

{
						name: "Terms and conditions",
						id: "Terms and conditions",
						href: "/user",
						icon: "user-file-user",
						onClick: (e) => {
							e.preventDefault();
							history.push(e.currentTarget.pathname);
						},
					},

will try mainNavigation solution you provided -although its a bit verbose but i will try to look in source code for full example- and let you know

thank you again

from scale.

You're very welcome.

I'm glad the onClick prop works for you. onClick is also available in the for mainNavigation attribute in the header, so maybe you'd want to use it too. I would recommend exploring the slots/custom markup option anyways :)

from scale.

Thank you @alzalabany for opening this issue.

Currently it's not possible to add custom elements in neither mainNavigation for the header nor footerNavigation for the footer.

The header however allows you to add custom markup via slots. The 3 slots you could use for this would be:

• menu-main for the main menu on the left hand side
• menu-mobile for the mobile version of the main menu
• menu-icon for the right hand side

When you use these slots, you are free to structure your menu in any way you like, including other React components like the router Link you mention.

Here's an example:

<scale-app-shell>
  <scale-app-header slot="header">
    <div slot="menu-main">
      <scale-menu-flyout>
        <button slot="trigger">Menu</button>
        <scale-menu-flyout-list>
          <scale-menu-flyout-item>
            <!-- replace with your own React component -->
            <a href="#1">Link 1</a>
          </scale-menu-flyout-item>
          <scale-menu-flyout-item>
            <a href="#2">Link 2</a>
          </scale-menu-flyout-item>
        </scale-menu-flyout-list>
      </scale-menu-flyout>
    </div>
    <div slot="menu-mobile">
      <!-- "left side" content for mobile -->
    </div>
    <div slot="menu-icon">
      <!-- right side, your code here -->
    </div>
  </scale-app-header>
</scale-app-shell>

If you need more info regarding slots (they work a bit different than in JS frameworks), I suggest you check these pages:

• https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots#adding_flexibility_with_slots
• https://javascript.info/slots-composition

The "as prop" pattern idea is indeed interesting but not feasible, since you'll be passing a React component into a web component, and the web component wouldn't know how to deal with a virtual DOM node.

The ScaleLink component is a light wrapper around an a tag. So I believe it's better in this case for you to create a React component that wraps the router's Link and add some Scale styles using the Scale's CSS variables.

Let me know what you think.

from scale.