Novu•17mo 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)

Tomer Barnea•8/28/24, 6:03 PM

@Pawan Jain can you help out here?

Pawan Jain•8/30/24, 7:30 AM

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

Pawan Jain•8/30/24, 7:30 AM

example for popoverTrigger

Pawan Jain•8/30/24, 7:31 AM

.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;
}

Pawan Jain•8/30/24, 7:31 AM

"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•8/30/24, 7:33 AM

This is how it will work

Pawan Jain•8/30/24, 7:35 AM

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

"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", }, }} /> ); }

Style inbox component react

Similar Threads

Similar Threads

Similar Threads