popchat

Guide

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

• Load the component on any parent component. It takes in 4 props, they are
  • chatHead: Takes in a string to as the name of the tab
  • 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
            }
        ]
    

  • 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)
      } 
  

  • 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>
  )