meses-messaging/src/ui/components/MessagingButton/index.jsx

Meses messaging SDK in JavaScript

import React from 'react'
import styles from './styles.css'
import TiMessages from 'react-icons/lib/ti/messages'

class MessagingButton extends React.Component {
  constructor() {
    super()
  }

  render() {
    let { className, buttonIcon, onClick, totalUnreadCount } = this.props
    let icon = buttonIcon ? buttonIcon : (<TiMessages />)
    
    let messagingButton = <span className={ styles.icon }>{ icon }</span>
    let totalUnreadCountLabel = (totalUnreadCount > 0) ?
      <span className={ styles.unreadCountLabel }>{ totalUnreadCount }</span> : ''

    return (
      <div className={ styles.btn + ' ' + className } onClick={ onClick }>
        { messagingButton }
        { totalUnreadCountLabel }
      </div>
    )
  }
}

export default MessagingButton