Novu•4w ago

Style inbox component react

I was trying to migrate from novu provider to novu inbox component but I had hard time styling it. First, novu react doesn't export dark them as mentioned in the docs, so only light theme is available. Also, in the variables in the appearance props I can control all variables except for on hover color. There's not enough examples on customizing the appearance, controlling notifications hover, or other styles in the elements prop Finally, the inbox notification drops the notification type (when user clicks on notification I would like to know what notification is this, the name of the temple for example post like or new post or new message)

4 Replies

Tomer Barnea•3w ago

@Pawan Jain can you help out here?

Pawan Jain•3w ago

Also, in the variables in the appearance props I can control all variables except for on hover color. There's not enough examples on customizing the appearance, controlling notifications hover, or other styles in the elements prop

To add hover state, create styles file add class with and without hover state and then use that class for particular element example for popoverTrigger

.novu-popover-trigger {
  background-color: red;
}

.novu-popover-trigger:hover {
  background-color: blue;
}

.novu-popover-trigger {
  background-color: red;
}

.novu-popover-trigger:hover {
  background-color: blue;
}

"use client";
import "./page.css";
import { Inbox } from "@novu/react";
import { env } from "../env.mjs";

export default function NovuInbox() {
  const handleActionAndNotificationClick = (data: any) => {
    console.log("handleActionAndNotificationClick", data);
  };

  return (
    <Inbox
      applicationIdentifier={env.NEXT_PUBLIC_NOVU_APPLICATION_IDENTIFIER}
      subscriberId={env.NEXT_PUBLIC_SUBSCRIBER_ID}
      onNotificationClick={handleActionAndNotificationClick}
      onPrimaryActionClick={handleActionAndNotificationClick}
      onSecondaryActionClick={handleActionAndNotificationClick}
      appearance={{
        elements: {
          popoverTrigger: "novu-popover-trigger",
        },
      }}
    />
  );
}

"use client";
import "./page.css";
import { Inbox } from "@novu/react";
import { env } from "../env.mjs";

export default function NovuInbox() {
  const handleActionAndNotificationClick = (data: any) => {
    console.log("handleActionAndNotificationClick", data);
  };

  return (
    <Inbox
      applicationIdentifier={env.NEXT_PUBLIC_NOVU_APPLICATION_IDENTIFIER}
      subscriberId={env.NEXT_PUBLIC_SUBSCRIBER_ID}
      onNotificationClick={handleActionAndNotificationClick}
      onPrimaryActionClick={handleActionAndNotificationClick}
      onSecondaryActionClick={handleActionAndNotificationClick}
      appearance={{
        elements: {
          popoverTrigger: "novu-popover-trigger",
        },
      }}
    />
  );
}

Pawan Jain•3w ago

This is how it will work

Pawan Jain•3w ago

Finally, the inbox notification drops the notification type (when user clicks on notification I would like to know what notification is this, the name of the temple for example post like or new post or new message)

we have open issue and PR to add workflowId support

Gaming

Programming

Style inbox component react