support `Link` from react-router-dom (button-close not rendered anymore when using custom children)

[zhenyulin]

currently using custom children so that I can bind Link from react-router-dom to the links, would there be a better way to make it work?

[FrancescoCioria]

Hi @zhenyulin, thank you for taking the time to open an issue :)

Could you also add an example of this problem?

[dinuchiriac]

Same issue, here is what I'm trying to do:

<CookieBanner disableStyle cookie="user-has-accepted-cookies">
          <div className="react-cookie-banner">
            <span className="cookie-message">
              Our website uses cookies.
              By continuing to use our website, you accept our use of these in line with our
              &nbsp;<Link
                to="/privacy"
              >privacy policy
              </Link>.
            </span><div className="button-close">Got it</div>
          </div>
        </CookieBanner>

[FrancescoCioria]

oh ok, so the issue is that the prop link lets you change the message, the href and the target of the <a> tag but does not let you use the Link component instead of <a>.

What if we improved the API to make link accept a component instead of a JSON object?

It could work like this:

const link = <Link to="/privacy">privacy policy</Link>;

<CookieBanner link={link} />

or, for the old use-case where you used <a>:

const link = <a href="/privacy" target="_blank">privacy policy</a>;

<CookieBanner link={link} />

What do you think about it? Would it work for you?

[dinuchiriac]

In my case i want to have a custom link to /privacy page in the banner and a separate close button

The issue is that close button <div className="button-close">Got it</div> is not working anymore if using custom html.

[jkirkpatrick]

I am also encountering this issue due to Link / react-router. I am also using react-intl which is encountering a very similar set of issues with PropType.string vs node/Element.

The proposed solution (above) would work fine:

const link = <Link to="/privacy">privacy policy</Link>;

<CookieBanner link={link} />

If it's not too much trouble, being able to use the generated <span>'s from react-intl as props is a nice addition:

import { FormattedMessage } from 'react-intl';

const link = <Link to="/privacy"><FormattedMessage id='myprivacylink' /></Link>;
const msg = <FormattedMessage id='myprivacymessage' />;

<CookieBanner link={link} message={msg} />

Has work on this issue started? Or would a PR be helpful (give me a reason to learn TS)?

[cezarneaga]

@dinu88 salut, or hello! :)

you will need to call it like this to get you button to work.

<CookieBanner
  dismissOnScroll={false}
  cookie="accepted-cookies-v1"
  cookieExpiration={{ days: 180 }}
  children={onAccept => (<YourCustomComponent onAccept={onAccept} />)} />

[FrancescoCioria]

I opened a PR to fix this issue: #52