{"id":17651769,"url":"https://github.com/lahsivjar/react-talk","last_synced_at":"2025-05-07T07:16:22.778Z","repository":{"id":57346187,"uuid":"114147302","full_name":"lahsivjar/react-talk","owner":"lahsivjar","description":"React component for chat box UI with pluggable support for SockJS client","archived":false,"fork":false,"pushed_at":"2018-02-15T09:23:01.000Z","size":38,"stargazers_count":5,"open_issues_count":7,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-21T06:46:30.464Z","etag":null,"topics":["chat","chatbox","react-components","reactjs","ui-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-talk","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lahsivjar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-13T17:04:11.000Z","updated_at":"2022-09-01T03:52:52.000Z","dependencies_parsed_at":"2022-09-19T13:12:06.824Z","dependency_job_id":null,"html_url":"https://github.com/lahsivjar/react-talk","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lahsivjar%2Freact-talk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lahsivjar%2Freact-talk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lahsivjar%2Freact-talk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lahsivjar%2Freact-talk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lahsivjar","download_url":"https://codeload.github.com/lahsivjar/react-talk/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242930187,"owners_count":20208415,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","chatbox","react-components","reactjs","ui-components"],"created_at":"2024-10-23T11:43:34.924Z","updated_at":"2025-03-10T21:31:08.143Z","avatar_url":"https://github.com/lahsivjar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-talk\n\nReact component for chat box UI with pluggable support for SockJS client via [react-stomp](https://github.com/lahsivjar/react-stomp)\n\n## Installation\n\n```\nnpm install --save react-talk\n```\n\n## Example Usage\n\n```\n// Using ES6\n\nimport React from \"react\";\nimport ReactDom from \"react-dom\";\nimport { TalkBox } from \"react-talk\";\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      messages: [{\n          \"author\": \"Ponger\",\n          \"authorId\": \"pong\",\n          \"message\": \"How you doin'!\",\n          \"timestamp\": Date.now().toString()\n      }]\n    };\n  }\n\n  onMessageReceive = (msg) =\u003e {\n    this.setState(prevState =\u003e ({\n        messages: [...prevState.messages, msg]\n    }));\n  }\n\n  sendMessage = (msg, selfMsg) =\u003e {\n    // selfMsg is the message object constructed from the message typed by the current user\n    // NOTE: selfMsg doesn't include timestamp and needs to be added by the user of the module\n    // in client or server side as required\n    selfMsg[\"timestamp\"] = Date.now().toString();\n    this.setState(prevState =\u003e ({\n        messages: [...prevState.messages, selfMsg]\n    }));\n    // If message sending failed return false otherwise return true\n    try {\n      // Insert code to send the message below\n      ...\n      return true;\n    } catch (e) {\n      return false;\n    }\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cTalkBox topic=\"react-websocket-template\" currentUserId=\"ping\" currentUser=\"Pinger\"\n          messages={ this.state.messages } onSendMessage={ this.sendMessage } /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nReactDom.render(\u003cApp /\u003e, document.getElementById(\"root\"));\n```\n\n## Demonstration\nhttps://react-websocket.herokuapp.com/index\n\nA complete implementation using SockJs, STOMP and springboot can be found at: https://github.com/lahsivjar/spring-websocket-template/tree/master/with-sockjs\n\n## Parameters\n\n* `topic`: The topic of the chat. Will be displayed in the chat box header\n* `currentUserId`: User id for the current user who is using the chat box\n* `currentUser`: Display user name for the current user who is using the chat box\n* `messages`: An array of messages. Each message object should be [schematized](#message-schema).\n\n### Message Schema\n```\n{  \n    \"authorId\": \u003cunique author id for the author\u003e,\n    \"author\": \u003cauthor or user diplay name for the message\u003e,\n    \"message\": \u003cmessage\u003e,\n    \"timestamp\": \u003cthe difference, measured in milliseconds, between the current time and midnight, January 1, 1970 UTC\u003e\n}\n```\n\n## Issues\n\nReport any issues or bugs to https://github.com/lahsivjar/react-talk/issues\n\n## Major changes in version 1.0.0\n\n* `currentUserId` property added to `TalkBox` which refers to the unique id of the current user\n* `onSendMessage` callback must return a boolean indicating send status\n* Message object has been modified with following changes:\n  1. `timestamp` is added to indicate message time (unit is in milliseconds)\n  2. `authoId` is added to indicate a unique id for the author\n  3. `author` has been changed to refer to the display name of the user\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flahsivjar%2Freact-talk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flahsivjar%2Freact-talk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flahsivjar%2Freact-talk/lists"}