Twilio Chat Item

Live Demo

This is a simple responsive React component for a chat.

Usage

Install latest version from npm:

npm install twilio-chat-item --save

Then, import it:

import ChatItem from 'twilio-chat-item';

Finally, use it in your React application:

import React, { Component } from 'react';
import ChatItem from 'twilio-chat-item';

class App extends Component {
  render() {
    return (
      <div>
        <ChatItem title='Arnold Shwarp' />
      </div>
    );
  }
}

export default App;

Notes: This component will import Open Sans font from google fonts.

Options

You can supply the following props to the component

Property name	Type	Default	Description
title	string	'Harry Robinson'	First line string
subtitle	string	'Online | 14h'	Second line string
url	string	'https://via.placeholder.com/150x150'	Image URL
statusColor	string	'green'	Color of status dot
minWidth	string	'auto'	minimum width of the component
maxWidth	string	'180px'	maximum width of the component