diff --git a/packages/react-chat-example/src/index.tsx b/packages/react-chat-example/src/index.tsx
index 27277e1b..c8e6f8d4 100644
--- a/packages/react-chat-example/src/index.tsx
+++ b/packages/react-chat-example/src/index.tsx
@@ -1,10 +1,10 @@
-import { ReactChat } from "@dappconnect/react-chat";
+import { community, lightTheme, ReactChat } from "@dappconnect/react-chat";
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
-
+
,
document.getElementById("root")
);
diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index b16d9234..b2b63410 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/Chat.tsx
@@ -1,6 +1,7 @@
import React, { useState } from "react";
import styled from "styled-components";
+import { useNarrow } from "../contexts/narrowProvider";
import { ChannelData, channels } from "../helpers/channelsMock";
import { CommunityData } from "../helpers/communityMock";
import { useMessenger } from "../hooks/useMessenger";
@@ -18,7 +19,9 @@ interface ChatProps {
export function Chat({ theme, community }: ChatProps) {
const [activeChannel, setActiveChannel] = useState(channels[0]);
const [showMembers, setShowMembers] = useState(true);
- const [showChannels, setShowChannels] = useState(false);
+ const [showChannels, setShowChannels] = useState(true);
+ const narrow = useNarrow();
+ // const className = useMemo(() => (narrow ? 'narrow' : ''), [narrow]);
const {
messenger,
@@ -33,7 +36,7 @@ export function Chat({ theme, community }: ChatProps) {
return (
- {showChannels && (
+ {showChannels && !narrow && (
Connecting to waku
)}
- {showMembers && (
+ {showMembers && !narrow && (
(null);
return (
-
-
-
-
+
+
+
+
+
+
);
}
diff --git a/packages/react-chat/src/contexts/narrowProvider.tsx b/packages/react-chat/src/contexts/narrowProvider.tsx
new file mode 100644
index 00000000..0c5d3c28
--- /dev/null
+++ b/packages/react-chat/src/contexts/narrowProvider.tsx
@@ -0,0 +1,19 @@
+import React, { createContext, useContext } from "react";
+
+import { useRefWidthBreak } from "../hooks/useRefWidthBreak";
+
+const NarrowContext = createContext(false);
+
+export function useNarrow() {
+ return useContext(NarrowContext);
+}
+
+interface NarrowProviderProps {
+ children: React.ReactNode;
+ myRef: React.RefObject;
+}
+
+export function NarrowProvider({ children, myRef }: NarrowProviderProps) {
+ const narrow = useRefWidthBreak(myRef, 735);
+ return ;
+}
diff --git a/packages/react-chat/src/hooks/useRefWidthBreak.ts b/packages/react-chat/src/hooks/useRefWidthBreak.ts
new file mode 100644
index 00000000..bfa1295c
--- /dev/null
+++ b/packages/react-chat/src/hooks/useRefWidthBreak.ts
@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from "react";
+
+export function useRefWidthBreak(
+ myRef: React.RefObject,
+ sizeThreshold: number
+) {
+ const [widthBreak, setWidthBreak] = useState(false);
+
+ useEffect(() => {
+ const checkDimensions = () => {
+ const width = myRef?.current?.offsetWidth ?? 0;
+ if (width && width < sizeThreshold && width > 0) {
+ if (widthBreak === false) {
+ setWidthBreak(true);
+ }
+ } else {
+ if (widthBreak === true) {
+ setWidthBreak(false);
+ }
+ }
+ };
+ checkDimensions();
+ window.addEventListener("resize", checkDimensions);
+ return () => {
+ window.removeEventListener("resize", checkDimensions);
+ };
+ }, [myRef, widthBreak, myRef?.current?.offsetWidth]);
+
+ return widthBreak;
+}
diff --git a/packages/react-chat/src/index.ts b/packages/react-chat/src/index.ts
index d9665932..36b9ddfe 100644
--- a/packages/react-chat/src/index.ts
+++ b/packages/react-chat/src/index.ts
@@ -1,3 +1,5 @@
import { ReactChat } from "./components/ReactChat";
+import { community } from "./helpers/communityMock";
+import { darkTheme, lightTheme } from "./styles/themes";
-export { ReactChat };
+export { ReactChat, lightTheme, darkTheme, community };