Novu•7d ago

<Preferences/> outside <Inbox/> error

Error: Component must be wrapped with NovuUIContext Code:

import { NovuProvider, Preferences } from '@novu/react'

<NovuProvider subscriberId="subscriberId" applicationIdentifier="applicationIdentifier">
    <Preferences />
 </NovuProvider>

import { NovuProvider, Preferences } from '@novu/react'

<NovuProvider subscriberId="subscriberId" applicationIdentifier="applicationIdentifier">
    <Preferences />
 </NovuProvider>

11 Replies

Pawan Jain•7d ago

Hey Russ

I will check this

Can you share the version of npm package?

Russ SaladOP•7d ago

@Pawan Jain "@novu/react": "2.6.6"

Pawan Jain•7d ago

@Russ Salad <Preferences /> component should be used inside of <Inbox /> component. Can you share specific reasons of using it with <NovuProvider />

Russ SaladOP•7d ago

The Preferences component is used to display the subscriber preferences. **Use it when you want to render preferences in another part of your application** or create a custom layout for the Inbox.

Novu_Bot•7d ago

@Russ Salad, you just advanced to level 4!

Russ SaladOP•7d ago

https://docs.novu.co/platform/inbox/react/components/preferences#basic-usage

| Novu Documentation

Learn how to use and customize the Preferences component in React to manage notification settings.

Russ SaladOP•7d ago

I want to have dedicated page for notification configs

Pawan Jain•7d ago

@Russ Salad Do you only want to use our pre-built component t You can build a custom preference page using usePreferences hooks This component should be wrapped in <NovuProvider />

import { usePreferences } from "@novu/react";

export default function PreferencePage() {
  const { preferences, error, isLoading, isFetching, refetch } =
    usePreferences();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return preferences?.map((preference) => {
    return (
      <div key={preference.workflow?.identifier}>
        {preference.level} // This tells us if it's a workflow or a global
        preference.
        {preference.workflow?.name}
        <button
          onClick={() => preference.update({ channels: { email: true } })}
        >
          Enable Email{" "}
        </button>
        <button
          onClick={() => preference.update({ channels: { email: false } })}
        >
          Disable Email{" "}
        </button>
      </div>
    );
  });
}

import { usePreferences } from "@novu/react";

export default function PreferencePage() {
  const { preferences, error, isLoading, isFetching, refetch } =
    usePreferences();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return preferences?.map((preference) => {
    return (
      <div key={preference.workflow?.identifier}>
        {preference.level} // This tells us if it's a workflow or a global
        preference.
        {preference.workflow?.name}
        <button
          onClick={() => preference.update({ channels: { email: true } })}
        >
          Enable Email{" "}
        </button>
        <button
          onClick={() => preference.update({ channels: { email: false } })}
        >
          Disable Email{" "}
        </button>
      </div>
    );
  });
}

NovuProvider | Novu Documentation

Learn how to use the NovuProvider component to set up the Novu context in your React application

Russ SaladOP•6d ago

@Pawan Jain somehow it doesn't send the GET /preferences request and the preferences are undefined

Pawan Jain•6d ago

Not sure, I follow

Can you share the screenshot?

Pawan Jain•4d ago

@Russ Salad ping

Gaming

Programming

<Preferences/> outside <Inbox/> error

Did you find this page helpful?