react-peer-chat 0.3.5 → 0.3.7

package/README.md

@@ -6,6 +6,7 @@ It is as easy as to import a React component!
 - Peer-to-peer chat without need to have any knowledge about WebRTC
 - Easy to use
 - Supports text chat that persists on page reload
+- Clear text chat on command
 - Supports voice chat
 - Fully Customizable. See [usage with FoC](#Full-Customization)
 ## Installation
@@ -24,23 +25,25 @@ To install react-peer-chat
   bun add react-peer-chat
 ```
 ## Usage
-When you use the `<Chat>` component of `react-peer-chat`, initially the user will see 2 buttons(svg icons), one for text chat and other for voice chat.
+`react-peer-chat` default exports `<Chat>` component. When you use the `<Chat>` component, initially the user will see 2 buttons (svg icons), one for text chat and other for voice chat.
+
+It also exports a `clearChat` function that clears the text chat whenever invoked.
 #### Basic Usage
 ```jsx
-import React, { useEffect } from 'react';
+import React from 'react';
 import Chat, { clearChat } from 'react-peer-chat';
 import 'react-peer-chat/build/styles.css';
 
-function App() {
-    useEffect(() => {
-        return clearChat // clear the chat when app is unmounted
-    }, [])
-
-    return <Chat
-        name='John Doe'
-        peerId='some-unique-id' 
-        remotePeerId='another-unique-id'
-    />
+export default function App() {
+    return <div>
+        <Chat
+            name='John Doe'
+            peerId='some-unique-id' 
+            remotePeerId='another-unique-id'
+        />
+        {/* Text chat will be cleared when following button is clicked. */}
+        <button onClick={clearChat}>Clear Chat</button>
+    </div>
 }
 ```
 #### Partial Customization
@@ -50,7 +53,7 @@ import React from 'react';
 import Chat from 'react-peer-chat';
 import 'react-peer-chat/build/styles.css';
 
-function App() {
+export default function App() {
     return <Chat 
         name='John Doe'
         peerId='some-unique-id'
@@ -73,7 +76,7 @@ import React from 'react'
 import Chat from 'react-peer-chat'
 // import 'react-peer-chat/build/styles.css' (No need to import CSS when using custom component)
 
-function App() {
+export default function App() {
     return <Chat
         name='John Doe'
         peerId='some-unique-id'

package/build/icons.js

@@ -1,27 +1,27 @@
 import React from "react";
 export function BiSolidMessageDetail(props) {
-    return React.createElement("span", { ...props },
+    return React.createElement("span", { className: 'rpc-icon-container', ...props },
         React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'rpc-scale-down' },
             React.createElement("path", { d: "M20 2H4c-1.103 0-2 .894-2 1.992v12.016C2 17.106 2.897 18 4 18h3v4l6.351-4H20c1.103 0 2-.894 2-1.992V3.992A1.998 1.998 0 0 0 20 2zm-6 11H7v-2h7v2zm3-4H7V7h10v2z" })));
 }
 export function BiSolidMessageX(props) {
-    return React.createElement("span", { ...props },
+    return React.createElement("span", { className: 'rpc-icon-container', ...props },
         React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'rpc-scale-down' },
             React.createElement("path", { d: "M20 2H4c-1.103 0-2 .894-2 1.992v12.016C2 17.106 2.897 18 4 18h3v4l6.351-4H20c1.103 0 2-.894 2-1.992V3.992A1.998 1.998 0 0 0 20 2zm-3.293 11.293-1.414 1.414L12 11.414l-3.293 3.293-1.414-1.414L10.586 10 7.293 6.707l1.414-1.414L12 8.586l3.293-3.293 1.414 1.414L13.414 10l3.293 3.293z" })));
 }
 export function GrSend(props) {
-    return React.createElement("span", { ...props },
+    return React.createElement("span", { className: 'rpc-icon-container', ...props },
         React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'rpc-scale-down rpc-invert' },
             React.createElement("path", { fill: "none", stroke: "#000", strokeWidth: 2, d: "M22,3 L2,11 L20.5,19 L22,3 Z M10,20.5 L13,16 M15.5,9.5 L9,14 L9.85884537,20.0119176 C9.93680292,20.5576204 10.0751625,20.5490248 10.1651297,20.009222 L11,15 L15.5,9.5 Z" })));
 }
 export function BsFillMicFill(props) {
-    return React.createElement("span", { ...props },
+    return React.createElement("span", { className: 'rpc-icon-container', ...props },
         React.createElement("svg", { fill: "currentColor", width: '1rem', height: '1rem' },
             React.createElement("path", { d: "M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z" }),
             React.createElement("path", { d: "M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z" })));
 }
 export function BsFillMicMuteFill(props) {
-    return React.createElement("span", { ...props },
+    return React.createElement("span", { className: 'rpc-icon-container', ...props },
         React.createElement("svg", { fill: "currentColor", width: '1rem', height: '1rem' },
             React.createElement("path", { d: "M13 8c0 .564-.094 1.107-.266 1.613l-.814-.814A4.02 4.02 0 0 0 12 8V7a.5.5 0 0 1 1 0v1zm-5 4c.818 0 1.578-.245 2.212-.667l.718.719a4.973 4.973 0 0 1-2.43.923V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 1 0v1a4 4 0 0 0 4 4zm3-9v4.879L5.158 2.037A3.001 3.001 0 0 1 11 3z" }),
             React.createElement("path", { d: "M9.486 10.607 5 6.12V8a3 3 0 0 0 4.486 2.607zm-7.84-9.253 12 12 .708-.708-12-12-.708.708z" })));

package/build/index.js

@@ -116,9 +116,9 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
         if (container)
             container.scrollTop = container.scrollHeight;
     }, [dialog, remotePeerName, messages]);
-    return React.createElement("div", { className: 'rpc-main', ...props },
+    return React.createElement("div", { className: 'rpc-main rpc-font', ...props },
         typeof children === 'function' ? children({ remotePeerName, messages, addMessage, audio, setAudio }) : React.createElement(React.Fragment, null,
-            text && React.createElement("div", null,
+            text && React.createElement("div", { className: 'rpc-dialog-container' },
                 dialog ? React.createElement(BiSolidMessageX, { onClick: () => setDialog(false) }) : React.createElement("div", { className: 'rpc-notification' },
                     React.createElement(BiSolidMessageDetail, { onClick: () => {
                             setNotification(false);
@@ -127,14 +127,14 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
                     notification && React.createElement("span", { className: 'rpc-badge' })),
                 React.createElement("dialog", { ref: dialogRef, className: `${dialog ? 'rpc-dialog' : ''} rpc-position-${(dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.position) || 'center'}`, style: dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.style },
                     React.createElement("div", { className: 'rpc-heading' }, "Chat"),
-                    React.createElement("hr", null),
+                    React.createElement("hr", { className: 'rpc-hr' }),
                     React.createElement("div", null,
                         React.createElement("div", { ref: containerRef, className: 'rpc-message-container' }, messages.map(({ id, text }, i) => React.createElement("div", { key: i },
                             React.createElement("strong", null,
                                 id === peerId ? 'You' : remotePeerName,
                                 ": "),
                             React.createElement("span", null, text)))),
-                        React.createElement("hr", null),
+                        React.createElement("hr", { className: 'rpc-hr' }),
                         React.createElement("form", { className: 'rpc-input-container', onSubmit: e => {
                                 var _a;
                                 e.preventDefault();
@@ -144,8 +144,8 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
                                     addMessage({ id: peerId, text }, true);
                                 }
                             } },
-                            React.createElement("input", { ref: inputRef, className: 'rpc-input', placeholder: 'Enter a message' }),
-                            React.createElement("button", { type: 'submit' },
+                            React.createElement("input", { ref: inputRef, className: 'rpc-input rpc-font', placeholder: 'Enter a message' }),
+                            React.createElement("button", { type: 'submit', className: 'rpc-button' },
                                 React.createElement(GrSend, null)))))),
             voice && React.createElement("div", null, audio ? React.createElement(BsFillMicFill, { title: "Turn mic off", onClick: () => setAudio(false) }) : React.createElement(BsFillMicMuteFill, { title: "Turn mic on", onClick: () => setAudio(true) }))),
         voice && audio && React.createElement("audio", { ref: streamRef, autoPlay: true, style: { display: 'none' } }));

package/build/styles.css

@@ -1,9 +1,17 @@
+.rpc-font {
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
 .rpc-main {
     display: flex;
     align-items: center;
     column-gap: 0.5rem;
 }
 
+.rpc-dialog-container {
+    position: relative;
+}
+
 .rpc-notification {
     position: relative;
 }
@@ -19,32 +27,35 @@
 }
 
 .rpc-dialog {
-    display: flex;
-    flex-direction: column;
-    row-gap: 0.25rem;
+    position: absolute;
     background-color: black;
     color: white;
-    padding-top: 0.25rem;
-    outline: 2px solid white;
-    border-radius: 0.25rem;
-    font-size: smaller;
+    padding: 0.4rem 0 0.25rem 0;
+    border-radius: 0.4rem;
+    font-size: small;
 }
 
 .rpc-position-left {
-    left: 0.5rem;
+    left: 0.6rem;
     translate: -100%;
 }
 
 .rpc-position-center {
+    left: 0.5rem;
     translate: -50%;
 }
 
 .rpc-position-right {
-    left: 0.5rem;
+    left: 0.3rem;
+}
+
+.rpc-hr {
+    margin: 0.25rem 0;
+    border-color: rgba(255, 255, 255, 0.7);
 }
 
 .rpc-message-container {
-    height: 6rem;
+    height: 7rem;
     overflow-y: scroll;
     padding-inline: 0.5rem;
     margin-bottom: 0.25rem;
@@ -64,29 +75,47 @@
 
 .rpc-heading {
     text-align: center;
+    font-size: medium;
     font-weight: bold;
     padding-inline: 0.5rem;
 }
 
 .rpc-input-container {
     display: flex;
+    width: 15rem;
+    max-width: 90vw;
     column-gap: 0.25rem;
-    padding-inline: 0.5rem;
-    padding-block: 0.4rem;
+    padding: 0.25rem 0.5rem;
 }
 
 .rpc-input {
+    color: white;
+    width: 100%;
     background-color: black;
     border: none;
     outline: 1px solid rgba(255, 255, 255, 0.8);
     border-radius: 0.25rem;
-    padding-inline: 0.25rem;
+    padding: 0.3rem 0.25rem;
+}
+
+.rpc-input::placeholder {
+    color: rgba(255, 255, 255, 0.7);
 }
 
 .rpc-input:focus {
     outline: 2px solid white;
 }
 
+.rpc-button {
+    all: unset;
+    display: flex;
+}
+
+.rpc-icon-container {
+    display: flex;
+    align-items: center;
+}
+
 .rpc-scale-down {
     scale: calc(2/3);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-peer-chat",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "An easy to use react component for impleting peer-to-peer chatting.",
   "main": "./build/index.js",
   "type": "module",