popchat

Guide

A react module to manage your chatheads onscreen, on any page.

1. Load the component on any parent component. It takes in 4 props, they are
   1. chatHead: Takes in a string to as the name of the tab
   2. messages: Takes an array of messages to display. The array contains object of following structure,

          const messages = [
              {
                  sender: 'me',   //displayed in pale background
                  text: 'hey there!' 
              },
              {
                  sender: 'others',//displayed in background color specified in themeColor prop
                  text: 'what's up
              }
          ]

   3. getMessage: A function to retriev the message in the bubbel input, fired on pressing the Enter. Here's to define,

       const getMessage = (msg) => { 
           //process msg, the message in string 
           console.log(msg)
       } 

   1. themeColor: Optional prop t ospecify the theme color of the component, violet by default.

Here's a complete picture,

      const msgs = [
    {
      sender: 'me',
      text: 'hey, whatsup!'
    },
    {
      sender: 'others',
      text: 'hey, whatsup!'
    }, 
    {
      sender: 'others',
      text: 'hey, whatsup!'
    },
    {
      sender: 'me',
      text: 'hey, whatsup!'
    },
  ]
  const getMessage = (msg) => {
    console.log('App', msg)
  }
  
  return (
    <div>
        <Popchat messages={msgs} getMessage={getMessage} themeColor={'lightseagreen'} chatHead={'John Doe'} />
    </div>
  )