How to make brandComponent a hylerlink button in Header?

[edenlin18]

Version

1.8

Reproduction link

https://demos.creative-tim.com/material-kit-react/#/landing-page

Operating System

MacOS

Device

Macbook Pro

Browser & Version

Chrome latest version

Steps to reproduce

https://demos.creative-tim.com/material-kit-react/#/landing-page

As shown in the demo page above, the brandName component is simply a button and does not provide functionality to be injected with a link.

What is expected?

I expect the brand prop of the Header component be customizable such that I don't just simply pass in a string, but rather an actual react component.

What is actually happening?

It's only accepting a string, so the end result is just a button that can't be used to redirect.

---

Solution

Additional comments

[einazare]

Hello there, @edenlin18 ,

You can change our button from inside the Header component (src/components/Header/Header.js), line 63:

const brandComponent = <Button className={classes.title}>{brand}</Button>;

You can change this to something like:

const brandComponent = <Button className={classes.title} href={props.brandLink}>{brand}</Button>;

And when you call the Header component you can pass the brandLink, something like:

<Header 
    ...
    brandLink="https://github.com/creativetimofficial/material-kit-react/issues/75"
    ...
/>

Best,
Manu

[edenlin18]

Hi @einazare, that's definitely something I could do, but I would imagine that this is part of the package that you guys publish so I don't have to manually modify your source code. And if you guys do plan to include this, can it just take in a node instead of string for brand? So I can just simply pass in a customized component.

Also, an alternate fix for this I was thinking about is to just not render brandComponent when we don't pass in the brand name, so I can easily use leftLinks to mimic a customizable brandComponent.

Could this be added in the next release? Thanks a lot!

[einazare]

Hello again, @edenlin18 ,

I've noted this for our next release.
Please let the issue open.

Best,
Manu

[einazare]

Creative Tim board decided that this should be left for another update, and it will not enter the v1.9.0.