Opensource React Chat UI library

Opensource React Chat UI library

We are excited to announce that we have open-sourced our React chat UI library! This library provides a set of customizable, reusable components for building chat user interfaces in React applications.

With a focus on simplicity and ease of use, our react chat UI components make it quick and easy to add chat user interfaces to any project.

In this article, we are going to discuss

Steps taken to prepare the library 

Before open-sourcing the library, we took a number of steps to ensure that it was ready for public use. This included cleaning up the code, adding documentation, and verifying that all necessary licenses and permissions were in place.

We also wanted to make it as easy as possible for other developers to use and understand 
the library, so we spent time organizing the code and adding clear and concise documentation. 
By open-sourcing the library, we hope to not only make it available to a wider audience 
but also to encourage contributions and improvements from the community.

React Chat UI Examples

If you would like to see the React chat UI in action, you can visit the live demo. This demo allows you to test out the various features of the react chat components and see how they can be integrated into a real-world application. We encourage you to give it a try and see for yourself the power and flexibility of our chat UI.

How to Use the React Chat UI Library

You can find the source code for the React chat UI library on GitHub.

You can also install the library using npm:

npm install @minchat/react-chat-ui

or yarn: 

yarn add @minchat/react-chat-ui

import { MainContainer } from "@minchat/react-chat-ui";
       <div style={{ height: '100vh' }}> <MainContainer
           inbox={{
               onScrollToBottom: () => { },
               themeColor: "#6ea9d7",
               conversations: [{
                   id: "1",
                   title: "Epic gamers",
                   avatar: "https://images.pexels.com/photos/1704488/pexels-photo-1704488.jpeg?cs=srgb&dl=pexels-suliman-sallehi-1704488.jpg&fm=jpg"
                   , lastMessage: {
                       seen: false,
                       text: "Hello everbody"
                       ,
                       user: {
                           id: "martha_stewart",
                           name: "Daniel",
                           avatar: "https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
                       }
                   }
               }, {
                   id: "2",
                   title: "Devops",
                   lastMessage: {
                       seen: true,
                       text: "How do you enable an actuator on a servo motor of a hardware and design laboratory experiment in the city,an actuator on a servo motor of a hardware and design laboratory experiment in the city",
                       user: {
                           avatar: "https://fsdfsdfsdfs",
                           id: "daniel",
                           name: "Daniel",
                       }
                   }
               }],
               loading: false,
               onConversationClick: () => console.log("onChat click"),
               selectedConversationId: "1"
           }}
           selectedConversation={
               {
                   themeColor: "#6ea9d7",
                   messages: [
                       {
                           "user": {
                               "id": "danny_1",
                               "name": "Daniel Georgetown",
                               avatar: "https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"
                           },
                           "text": "first message"
                       },
                       {
                           "user": {
                               "id": "mark",
                               "name": "Markus"
                           },
                           "text": "hello"
                       },],
                       header: "Sandra Bullock",
           currentUserId: "danny_1",
               onSendMessage: () => console.log("onSendMessage"),
               onBack: () => { }
           }
       }
   />
       </div>

Motivation for open-sourcing

One of the main motivations for open-sourcing our React chat UI library was the desire to contribute to the open-source community. We believe in the power of open-source software and the benefits it can bring, such as increased collaboration, transparency, and innovation.

By open-sourcing our library, we hope to not only make it available to a wider audience but also to encourage contributions and improvements from the community. We believe that open-source software is a great way to collaborate and build better software together, and we are excited to be a part of that process.

Additionally, open-sourcing the library allows other developers to use and improve upon the code, which we hope will lead to even better and more powerful React chat components in the future.

Contributors

We are thrilled to have the support of such an amazing community of contributors and supporters for our React chat UI library! Your contributions, whether they were code contributions, bug reports, feature requests, or simply support and encouragement, have been invaluable in helping us create a powerful and user-friendly library. We are grateful for your dedication and passion, and we look forward to continuing to work together to make the library even better.

If you haven't already, we encourage you to get involved and be a part of this exciting open-source project.

Conclusion

We hope you have enjoyed learning about our open-sourced React chat UI library and are excited to use it in your own projects! If you are looking to build chat functionality into your application but don't want to worry about the backend, MinChat is the perfect solution.

With our chat UI components, you can easily and quickly add chat functionality to your application or website without having to worry about setting up and maintaining a backend server. So if you want to make building chat functionality a breeze, give MinChat a try today and see how our chat UI can help you create the chat experience you want.