useNovu

Learn how to use the useNovu hook to access the Novu client instance in your React application

The useNovu hook provides access to the Novu client instance from anywhere in your application. This hook must be used within a component that is wrapped by the NovuProvider.

Return Value

type NovuReturn = {
  novu: Novu;
  isLoading: boolean;
  error: Error | null;
};

Example Usage

Here's how to use the useNovu hook to interact with the Novu client:

import { useNovu } from '@novu/react';
 
function NotificationActions() {
  const { novu, isLoading } = useNovu();
 
  if (isLoading) return <div>Loading...</div>;
 
  const markAllAsRead = async () => {
    await novu.notifications.readAll();
  };
 
  const archiveAllRead = async () => {
    await novu.notifications.archiveAllRead();
  };
 
  return (
    <div>
      <button onClick={markAllAsRead}>Mark All as Read</button>
      <button onClick={archiveAllRead}>Archive All Read</button>
    </div>
  );
}

Accessing Notification Methods

The Novu client provides methods for managing notifications:

function NotificationItem({ notification }) {
  const { novu } = useNovu();
 
  const markAsRead = async () => {
    await novu.notifications.read(notification.id);
  };
 
  const archive = async () => {
    await novu.notifications.archive(notification.id);
  };
 
  return (
    <div>
      <h3>{notification.content}</h3>
      <button onClick={markAsRead}>Mark as Read</button>
      <button onClick={archive}>Archive</button>
    </div>
  );
}

Managing Preferences

You can also manage notification preferences:

function PreferencesManager() {
  const { novu } = useNovu();
 
  const updatePreferences = async () => {
    await novu.preferences.update({
      workflowId: 'workflow_id',
      channelPreferences: {
        email: false,
        sms: true,
      },
    });
  };
 
  return <button onClick={updatePreferences}>Update Preferences</button>;
}

The Novu client instance provides access to all the functionality available in the Headless API.

import { useNovu } from '@novu/react/hooks';
 
const NotificationToast = () => {
  const novu = useNovu();
 
  useEffect(() => {
    const listener = ({ result: notification }) => {
      // Show a toast notification
    };
 
    novu.on('notifications.notification_received', listener);
 
    return () => {
      novu.off('notifications.notification_received', listener);
    };
  }, [novu]);
 
  return null;
};

Return Value

Example Usage

Accessing Notification Methods

Managing Preferences

On this page