{"id":18488543,"url":"https://github.com/brandonmowat/react-chat-ui","last_synced_at":"2026-02-03T22:36:26.822Z","repository":{"id":10599872,"uuid":"66278337","full_name":"brandonmowat/react-chat-ui","owner":"brandonmowat","description":"🙊 A library of React components for building chat UI's.","archived":false,"fork":false,"pushed_at":"2023-07-08T00:43:58.000Z","size":1194,"stargazers_count":543,"open_issues_count":21,"forks_count":105,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-18T02:57:34.516Z","etag":null,"topics":["chat","messenger","react","react-components","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://brandonmowat.github.io/react-chat-ui/demo/","language":"TypeScript","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/brandonmowat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["brandonmowat"],"open_collective":null,"tidelift":null,"custom":null}},"created_at":"2016-08-22T14:11:11.000Z","updated_at":"2025-03-17T05:25:10.000Z","dependencies_parsed_at":"2024-06-18T16:54:38.252Z","dependency_job_id":"8770f9a6-3996-4010-ab45-639f24059684","html_url":"https://github.com/brandonmowat/react-chat-ui","commit_stats":{"total_commits":138,"total_committers":13,"mean_commits":"10.615384615384615","dds":"0.19565217391304346","last_synced_commit":"62d8d91689fcc70232cbae72f3a72e1f10bd0be5"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonmowat%2Freact-chat-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonmowat%2Freact-chat-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonmowat%2Freact-chat-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonmowat%2Freact-chat-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brandonmowat","download_url":"https://codeload.github.com/brandonmowat/react-chat-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247930990,"owners_count":21020147,"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","messenger","react","react-components","ui","ui-components"],"created_at":"2024-11-06T12:51:53.481Z","updated_at":"2026-02-03T22:36:21.801Z","avatar_url":"https://github.com/brandonmowat.png","language":"TypeScript","funding_links":["https://github.com/sponsors/brandonmowat"],"categories":["TypeScript","UI components"],"sub_categories":[],"readme":"![react-chat-ui logo](https://i.imgur.com/YhPrFWw.png)\n\n# 🙊 react-chat-ui\n\nA library of React components for building chat UI's.\n\n[![NPM](https://nodei.co/npm/react-chat-ui.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/react-chat-ui/)\n\n## Sponsor\n\nSponsored by [Pusher Chatkit](https://pusher.com/chatkit?utm_source=github\u0026utm_campaign=react-chat-ui-sponsorship):\n\n\u003ca href=\"https://pusher.com/chatkit?utm_source=github\u0026utm_campaign=react-chat-ui-sponsorship\"\u003e\n    \u003cimg width=\"650\" src=\"https://raw.githubusercontent.com/bookercodes/react-chat-ui/master/media/chatit-banner.png\" alt=\"Pusher Chatkit\"\u003e\u003c/a\u003e\n\n## Features\n\n* Auto scroll to bottom\n* SUPER easy to use\n* Multiple user grouping (try it out in the demo)\n\nKeep in mind that this project is still in the early stages of development. If you encounter a bug or have a feature request, please create an issue and/or tweet at me [here](http://twitter.com/brandonmowat).\n\n## Installation\n\n`npm install react-chat-ui --save`\n\n## Basic Usage\n\n```javascript\nimport { ChatFeed, Message } from 'react-chat-ui'\n\n// Your code stuff...\n\nrender() {\n\n  return (\n\n    // Your JSX...\n\n    \u003cChatFeed\n      messages={this.state.messages} // Array: list of message objects\n      isTyping={this.state.is_typing} // Boolean: is the recipient typing\n      hasInputField={false} // Boolean: use our input, or use your own\n      showSenderName // show the name of the user who sent the message\n      bubblesCentered={false} //Boolean should the bubbles be centered in the feed?\n      // JSON: Custom bubble styles\n      bubbleStyles={\n        {\n          text: {\n            fontSize: 30\n          },\n          chatbubble: {\n            borderRadius: 70,\n            padding: 40\n          }\n        }\n      }\n    /\u003e\n\n    // Your JSX...\n\n  )\n\n}\n```\n\nMake sure to keep a list of proper message objects in your class state.\nLike so:\n\n```javascript\n//...\nthis.state = {\n  messages: [\n    new Message({\n      id: 1,\n      message: \"I'm the recipient! (The person you're talking to)\",\n    }), // Gray bubble\n    new Message({ id: 0, message: \"I'm you -- the blue bubble!\" }), // Blue bubble\n  ],\n  //...\n};\n//...\n```\n\n## API\n\n* [ChatFeed](./src/ChatFeed)\n* [Message](./src/Message)\n* [ChatBubble](./src/ChatBubble)\n* [BubbleGroup](./src/BubbleGroup)\n\n## Contributing!¡1 🔧\n\nContributions are always welcomed and encouraged. If you don't want to write a feature request yourself, let ya boi know (either on [Twitter](http://twitter.com/brandonmowat) or by creating a Pull Request) and I'll get that shit coded right up.\n\n## TODO\n\n* documentation\n* documentation\n* documentation\n\n## Development\n\n```sh\nyarn dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonmowat%2Freact-chat-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrandonmowat%2Freact-chat-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonmowat%2Freact-chat-ui/lists"}