diff --git a/CHANGELOG.md b/CHANGELOG.md
index 05a08eb..98320cf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## v0.1.4
+
+- Added `useUnreads` hook
+
## v0.1.3
- Add `signature?: string` prop to `Session`
diff --git a/example/App.tsx b/example/App.tsx
index cdc480e..377577a 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -1,8 +1,8 @@
import "./App.css";
-import { Session, Chatbox } from "../lib/main";
+import { Session, Chatbox, useUnreads } from "../lib/main";
import Talk from "talkjs";
-import { ChangeEvent, useCallback, useMemo, useRef, useState } from "react";
+import { ChangeEvent, useCallback, useMemo, useRef, useState, ReactElement } from "react";
const convIds = ["talk-react-94872948u429843", "talk-react-194872948u429843"];
const users = [
@@ -151,6 +151,7 @@ function App() {
{...(blur ? { onBlur } : {})}
style={{ width: 500, height: 600 }}
/>
+
@@ -195,4 +196,26 @@ function App() {
);
}
+function UnreadsDisplay() {
+ const unreads = useUnreads();
+ let content: ReactElement | null = null;
+
+ if (unreads === undefined) {
+ content =
unreads is undefined (no session)
;
+ } else if (unreads.length === 0) {
+ content = No unread messages
+ } else {
+ content =
+ {unreads.map(u => {
+ return - {u.conversation.id} - {u.lastMessage.sender?.name || "system"}: {u.lastMessage.body}
+ })}
+
+ }
+
+ return
+ Unreads rendered with useUnreads
+ {content}
+
+}
+
export default App;
diff --git a/lib/SessionContext.ts b/lib/SessionContext.ts
index a6e89ee..18206e4 100644
--- a/lib/SessionContext.ts
+++ b/lib/SessionContext.ts
@@ -1,4 +1,4 @@
-import { createContext, useContext } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
import type Talk from "talkjs";
export const SessionContext = createContext(
@@ -31,3 +31,34 @@ export function useSession() {
const session = useContext(SessionContext);
return session?.isAlive ? session : undefined;
}
+
+/**
+ * Returns conversations with unread messages.
+ *
+ * @remarks
+ * Can only be used in child components of .
+ *
+ * @returns A list of {@link https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/Session/#UnreadConversation | UnreadConversation} objects,
+ * or undefined if this hook is used outside of the component, or the session is not alive for any other reason.
+ * During development in particular, sessions can be destroyed and recreated a
+ * lot, eg due to React.StrictMode or due to hot-module reloading.
+ */
+export function useUnreads() {
+ const session = useSession();
+ const [unreads, setUnreads] = useState();
+
+ useEffect(() => {
+ if (!session || !session.isAlive) {
+ setUnreads(undefined);
+ return;
+ }
+
+ const sub = session.unreads.onChange( unreads => {
+ setUnreads(unreads);
+ });
+
+ return () => sub.unsubscribe();
+ }, [session]);
+
+ return unreads;
+}
diff --git a/lib/main.tsx b/lib/main.tsx
index 950a246..6320f4e 100644
--- a/lib/main.tsx
+++ b/lib/main.tsx
@@ -3,4 +3,4 @@ export { Session } from "./Session";
export { Chatbox } from "./ui/Chatbox";
export { Inbox } from "./ui/Inbox";
export { Popup } from "./ui/Popup";
-export { useSession } from "./SessionContext";
+export { useSession, useUnreads } from "./SessionContext";
diff --git a/package.json b/package.json
index 493bf0a..cd46145 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
"url": "https://github.com/talkjs/talkjs-react/issues"
},
"homepage": "https://talkjs.com",
- "version": "0.1.3",
+ "version": "0.1.4",
"type": "module",
"files": [
"dist"