{"id":18487321,"url":"https://github.com/sejr/react-messenger","last_synced_at":"2025-04-08T20:30:59.290Z","repository":{"id":34001375,"uuid":"164736891","full_name":"sejr/react-messenger","owner":"sejr","description":"Chat UX components built with React, inspired by Facebook Messenger","archived":false,"fork":false,"pushed_at":"2023-01-04T01:42:16.000Z","size":3949,"stargazers_count":232,"open_issues_count":12,"forks_count":61,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-11-06T12:59:36.823Z","etag":null,"topics":["chat","components","css","css-grid","facebook","library","messaging","messenger","react","ux"],"latest_commit_sha":null,"homepage":null,"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/sejr.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":"2019-01-08T21:35:57.000Z","updated_at":"2024-10-24T17:18:16.000Z","dependencies_parsed_at":"2023-01-15T04:01:32.137Z","dependency_job_id":null,"html_url":"https://github.com/sejr/react-messenger","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sejr%2Freact-messenger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sejr%2Freact-messenger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sejr%2Freact-messenger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sejr%2Freact-messenger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sejr","download_url":"https://codeload.github.com/sejr/react-messenger/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247922742,"owners_count":21018852,"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","components","css","css-grid","facebook","library","messaging","messenger","react","ux"],"created_at":"2024-11-06T12:50:24.103Z","updated_at":"2025-04-08T20:30:57.985Z","avatar_url":"https://github.com/sejr.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./public/react-messenger.svg\" height=\"150px\" /\u003e\n  \u003ch1 align=\"center\"\u003eReact Messenger\u003c/h1\u003e  \n\u003c/p\u003e\n\n\u003e This project uses React and CSS to recreate the Facebook Messenger web application. It is in its early stages but most of the building blocks are in place. **THIS IS NOT AN OFFICIAL FACEBOOK PRODUCT NOR IS IT MAINTAINED BY ANY FACEBOOK EMPLOYEES.**\n\n\u003cp align=\"center\"\u003e\u003cb\u003e\u003ca href=\"https://zen-bell-45d9db.netlify.com/\"\u003eCLICK HERE FOR A LIVE DEMO\u003c/a\u003e\u003c/b\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/react-messenger-screen.png\" /\u003e\n\u003c/p\u003e\n\n\u003chr /\u003e\n\n## Available Components\n\nWhen using these components it is important to keep in mind that we are utilizing a few different dependencies to achieve a better user experience. Specifically:\n\n- [Moment](https://momentjs.com/) for parsing JavaScript dates and printing them in a readable way.\n- [Shave](https://github.com/dollarshaveclub/shave) to trim long messages to maintain consistency amongst `ConversationListItem`.\n- [Axios](https://github.com/axios/axios) to facilitate HTTP requests (for messages, users, etc).\n\n### Compose\n\nThe Compose component allows the user to send messages and attachments.\n\n| props | type | description |\n|-------|------|-------------|\n| `rightItems` | `ToolbarButton[]` | Icons that appear to the right of the `input` element allowing users to send more than text (e.g. photos, cash, location, etc). |\n\n### ConversationList\n\nThis is a simple component that renders `ConversationSearch` and uses `axios` to fetch users from the [Random User API](https://randomuser.me/).\n\n### ConversationListItem\n\nThis component provides an overview of a single conversation, including a photo, name (or group title), and a snippet of the most recent message. We use `shave` to trim the displayed message so that all instances of `ConversationListItem` take up the same amount of vertical space.\n\n| props | type | description |\n|-------|------|-------------|\n| `photo` | `String` | The URL of a photo to be displayed for the conversation. The demo uses the photo provided by the Random User API. |\n| `name` | `String` | The name of the conversation, whether it is a group or individual. |\n| `text` | `String` | The text of the most recent message; you do not have to truncate this yourself. |\n\n### ConversationSearch\n\nThis is a simple `input` element that is styled to resemble the Facebook Messenger search bar. Its placeholder is centered until the input is focused, moving the placeholder to the left.\n\n### Message\n\nBecause most of the work is done by `MessageList`, this component is pretty straight-forward. As stated below, there are a lot of `props` which allow you to style distinct groups of messages.\n\n| props | type | description |\n|-------|------|-------------|\n| `data` | `Object` | An object containing information about the message. We use `data.message` for the message body and `data.timestamp` for the JavaScript Date object representing the time at which the message was sent. |\n| `isMine` | `Boolean` | Applies a tint to the message (`#007aff` in demo) and aligns it to the right, indicating that the message was sent by you. |\n| `startsSequence` | `Boolean` | Indicates that the message represents the start of a sequence of messages. This sets the appropriate top border radius, depending on whether the message was sent by you or someone else. |\n| `endsSequence` | `Boolean` | Indicates that the message represents the end of a sequence of messages. This sets the appropriate bottom border radius, depending on whether the message was sent by you or someone else. |\n| `showTimestamp` | `Boolean` | Determines whether or not the timestamp of the message should be shown. The demo app sets this value to `true` if more than one hour has passed between messages. |\n\n### MessageList\n\nThis is a deceptively-simple component that does a lot of the heavy lifting for rendering sequences of messages with appropriate styling (see `MessageList.renderMessages`). Specifically, we use information about the messages (`author` and `timestamp`) to render groups of messages closer together with modified border-radii and margin. This is not just present in Facebook Messenger, but in other apps like iMessage as well. You can remove this functionality if you want to.\n\n### Messenger\n\nThis component is essentially the wrapper for the web application. It defines a [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) layout and exposes some helper classes (e.g. `scrollable`, allowing us to separate scrolling between the sidebar and content panes).\n\n### Toolbar\n\nThe demo uses two toolbars which sit above the sidebar and content panes. This component displays a title and can also include buttons. The title remains centered within the Toolbar regardless of whether elements are present on either side.\n\n| props | type | description |\n|-------|------|-------------|\n| `title` | `String` | The title to be displayed in the center of the toolbar. |\n| `leftItems` | `ToolbarButton[]` | The `ToolbarButton` elements that should appear on the left side of the toolbar. |\n| `rightItems` | `ToolbarButton[]` | The `ToolbarButton` elements that should appear on the right side of the toolbar. |\n\n\n### ToolbarButton\n\nProbably better described as an \"icon button,\" it is just that -- a button that shows an icon. I will add accessibility considerations in time.\n\n| props | type | description |\n|-------|------|-------------|\n| `icon` | `String` | The name of the icon to be represented via an icon font. I use [Ionicons](https://ionicons.com/) in the demo but this could easily be swapped out for [FontAwesome](https://fontawesome.com/) or a similar library. You can even make your own icon font at [Icomoon](https://icomoon.io/). |\n\n\u003chr /\u003e\n\n## Roadmap\n\nThis is a rather straight-forward library but I do plan to continue making improvements and adding features. If you would like to contribute, you are more than welcome to.\n\n- [ ] Media messages (e.g. photos, videos)\n- [ ] Tooltips, popovers, modals (for viewing options, sending new messages, etc)\n- [ ] Graceful degradation (network status indicator, loading spinners, etc)\n- [ ] Responsiveness\n\n\u003chr /\u003e\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\u003cbr\u003e\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\u003cbr\u003e\nYou will also see any lint errors in the console.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.\u003cbr\u003e\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\u003cbr\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr\u003e\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### `npm run eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can’t go back!**\n\nIf you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.\n\nYou don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n### Code Splitting\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting\n\n### Analyzing the Bundle Size\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size\n\n### Making a Progressive Web App\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app\n\n### Advanced Configuration\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration\n\n### Deployment\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/deployment\n\n### `npm run build` fails to minify\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsejr%2Freact-messenger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsejr%2Freact-messenger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsejr%2Freact-messenger/lists"}