krrish2-react-chat

    1.0.0 • Public • Published

    React Chat Components

    React Chat Components is a library of reusable and customizable components for building chat applications in React. Use the default components and themes or modify as you like with your own styles.

    Usage:

    1. You can start using our already built user interface right away by :
    import React from 'react';
    import { ChatListProvider } from './components/'
            
    const App = () => {
      return (
        <ChatListProvider userData={yourUserData}/>
      )
    }
        
    export default App; 

    Note : The userData prop is required for displaying the list. If the prop is not passed, only the header and the search bar are rendered.

    1. To use a custom styling, you can pass a chatProviderClass to the ChatListProvider component.
    import React from 'react';
    import { ChatListProvider } from './components/'
            
    const App = () => {
      return (
        <ChatListProvider 
          userData={yourUserData} 
          chatProviderClass="custom-chat-provider-class"
        />
      )
    }
     
    export default App;

    Similarily, you can pass your own styles to other default components.

    Example:

    import React from 'react';
    import { ChatListProvider, 
      ChatList,  
      ChatListHeader, 
      ChatListSearch 
    } from './components';
        
    const App = () => {
      return (
        <ChatListProvider 
          userData = {yourUserData}
          chatProviderClass = "your-custom-chat-provider-class" 
        >
          <ChatListHeader 
        chatHeaderClass = "your-custom-chat-header-class"
          />
          <ChatList 
        chatListClass = "your-custom-chat-list-class"
          />
          <ChatListSearch 
        chatSearchClass = "your-custom-chat-search-class"
          />
        </ChatListProvider>
      )
    }
     
    export default App; 
    1. To use your custom components for the child components, i.e., Chat List,Chat Header and Chat Search, you can pass your custom built components either as children or as props.
    import React from 'react';
    import { ChatListProvider } from './components/'
            
    const App = () => {
      return (
        <ChatListProvider 
          userData = {yourUserData} 
          customHeader = {//your custom Header}
          customList = {//your custom List}
          customsearch = {//your custom Seacrh bar}
        />
      )
    }
        
    export default App; 

    Components

    ChatListProvider

    This is the main component and can be used as the only component to start up and use React Chat Component's default interface.

    Props :

    Prop name Prop type Description
    userData object (required) This prop is used for passing user data for rendering the list of users.
    chatProviderClass string (optional) This prop can be used for passing custom style for the component.
    customHeader react component (optional) This prop can be used for passing custom header component.
    customList react component (optional) This prop can be used for passing custom list component.
    customSearch react component (optional) This prop can be used for passing custom search component.

    ChatList

    This is the component containing the list of all users along with their names, avatars and other details.

    Props :

    Prop name Prop type Description
    chatListClass string (optional) This prop can be used for passing custom style for the component.
    customChatListItem react component (optional) This prop can be used for passing custom chat list item component.

    ChatListHeader

    This is the header component of the chat list box.

    Props :

    Prop name Prop type Description
    chatHeaderClass string (optional) This prop can be used for passing custom style for the component.

    ChatListSearch

    This is the search bar component of the chat list box.

    Props :

    Prop name Prop type Description
    chatSearchClass string (optional) This prop can be used for passing custom style for the component.

    User data object :

    {
      id: 0,
      avatar: require(urlToAvatarImage),
      name: "Username",
      onlineStatus: "online",
      lastSeen: // last seen time as a Date() object ,
      previewMessage: "Lorem ipsum dolor sit amet.",
      messages: [
        {
          messageId: 1,
          text: 'message text',
          receivedFrom: {},
        },
      ]
    }

    Keywords

    none

    Install

    npm i krrish2-react-chat

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    2.68 MB

    Total Files

    96

    Last publish

    Collaborators

    • krrish