Badge style

[sivangilead]

Hi,

We are using custom Bell icon in order to open up the widget, however we are still getting the red badge appear next to the bell icon.
see screenshot below:

We want to apply custom style in order to hide the badge (and the cursor too when hovering over it), Iv'e been trying:

      <AnnounceKit
        widget="https://announcekit.app/widgets/v2/34MmKA"
        widgetStyle={{ visibility: 'hidden', cursor: 'default' }}
      >
        <Bell width="20" height="20" />
      </AnnounceKit>

It didn't work. We also have a problem to apply our own css because it has his own inline style which cannot be overridden.
Is there a way to handle to cursor and the visibility of the badge so we can see only our custom Bell icon?

[ahuggins]

You have to use a ref.

Something like this:

const [count, setCount] = useState(0);
    const ref = useRef();

    React.useEffect(() => {
        ref.current.unread().then(unreadCount => setCount(unreadCount));
    });

Then you use the ref:

<AnnounceKit
                ref={ref}
                widget="your announce kit url"
                widgetStyle={{ display: 'none' }}
                onWidgetClose={() => setCount(0)}
            />

Also note the widgetStyle={{ display: 'none' }} for hiding the notification bubble. But with the count you can now display that and control the css in another component.

Also not that onWidgetClose={() => setCount(0)} will set the count to 0 which may or may not be your desired effect. So change accordingly.

[stephan-noel-primer]

I was having a problem and saw that the problem is that the wrapper element for announcekit has a display: inline hardcoded and there is no way to override it. My workaround was to not pass children to AnnounceKit. If your badge should hide on display and it doesn't, try using catchClick instead of a ref.