Add custom information badge

In case you want to add some information badge on the ClickTopBar, you can use useClickBadge() hook to do it. You need to import it from csprclick library

import { useClickBadge } from '@make-software/csprclick-ui';

useClickBadge structure

useClickBadge hook returns two functions: setLeftBadge and setRightBadge. Both are responsible to add info badge on specific ClickTopBar side. Each of these functions accepts the same set of parameters. Here the list of props for badge customization.

export type BadgeSettings = {
        title: string;
        link?: string;
        color?: string;
        background: string;
   };

Here the example of having one badge with custom color, link and title on the left side of ClickTopBar:

const ClickTopBar = ({ themeMode, onThemeSwitch }) => {

  const { setLeftBadge } = useClickBadge();

  setLeftBadge({
      title: `📄 Go to CSPR.click docs`,
      background: 'blue',
      color:'white',
      link: 'https://docs.cspr.click/'
  });

}

Then you should see the result: one left side badge with your own color, link and title. Like on the screen below:

To remove the badge but keep it ready to use in codebase you can add null as parameter

    setLeftBadge(null);

So, to create your own custom badge dynamically, all you need is to use useClickBadge() hook and call setLeftBadge or setRightBadge functions.