@tnfdev/react

React wrapper for the Teknify notifications service.

Usage

To use @tnfdev/react, you can import it in your React components. Here's a simple example:

import { TeknifyProvider, Inbox } from '@tnfdev/react';

function App() {
  return (
    <TeknifyProvider>
      <Inbox />
    </TeknifyProvider>
  );
}

Now, the Inbox component will automatically fetch and display notifications for the current user. You can customize the behavior by passing props to the TeknifyProvider or Inbox components. You can also use the useNotifications hook to access notifications and methods directly:

import { useNotifications } from '@tnfdev/react';

function NotificationsComponent() {
  const { notifications } = useNotifications();

  return (
    <div>
      {notifications.map((notification) => (
        <div key={notification.id}>
          <p>{notification.message}</p>
          <button onClick={notification.markAsRead}>Mark as Read</button>
        </div>
      ))}
    </div>
  );
}

Customization UI

You can customize the UI of the Inbox component by passing props such as Bell, NotificationIte,, and more. Here's an example of how to customize the notification item:

import { TeknifyProvider, Inbox } from '@tnfdev/react';

function App() {
  return (
    <TeknifyProvider>
      <Inbox
        components={{
          Bell: (props) => <CustomBell {...props} />,
          NotificationItem: (props) => <CustomNotificationItem {...props} />,
        }}
      />
    </TeknifyProvider>
  );
}

See the Material-UI customization examples in the Vite demo Here.