Header : onClick

[zelytra]

How to handle the onClick of the quikAccessItem by my myself ? The documentation doesn't explain how we can do this or even is it possible ?
This code work, but my IDE is saying this should not work:

        {
          iconId: "fr-icon-logout-box-r-fill",
          linkProps: {
            onClick: () => keycloak.logout(),
          },
          text: "Logout",
        },

IDE error :

is not assignable to type Element | QuickAccessItem | null
Types of property linkProps are incompatible.
Type { onClick: () => Promise<void>; } is not assignable to type
Omit<LinkProps & RefAttributes<HTMLAnchorElement>, "children"> | (Omit<HTMLAnchorProps, "children" | "href"> & { ...; }) | undefined
Type { onClick: () => Promise<void>; } is not assignable to type
Omit<HTMLAnchorProps, "children" | "href"> & {   href: string; }
Property href is missing in type { onClick: () => Promise<void>; } but required in type { href: string; }

And when i build my app, any error thrown... i don't understant

[ddecrulle]

Hello, you just need to use buttonProps instead of linkProps :

 {
          iconId: "fr-icon-logout-box-r-fill",
          buttonProps: {
            onClick: () => keycloak.logout(),
          },
          text: "Logout",
        },

[garronej]

Hello @zelytra,

There is a detailed example in the storybook of how to handle precisely you usecase:

https://components.react-dsfr.codegouv.studio/?path=/docs/components-header--simple-header#header-with-quick-access-items

[zelytra]

Thank you !

[garronej]

If you're building an SPA (not using Next.js) you might want to consider using oidc-spa instead of Keycloak-js that will eventually be deprecated.
We're trying to position oidc-spa as it's official succesor.