jp-test-io-commenting

A react component to easily add Muut's Flat Commenting into your React applications using Federated Identity (SSO).

Install

npm install muut-io-react-commenting or yarn add muut-io-react-commenting

Usage

import React, { Component } from 'react'
import Commenting from 'muut-io-react-commenting'

const sso = {
  message: MESSAGE,
  signature: SIGNATURE,
  timestamp: TIMESTAMP,
  key: KEY,
  path: PATH
}

class App extends Component {
  render() {
    return <Commenting sso={sso} />
  }
}

export default App

PATH is the path of your post with a pattern of '/{community}/{category}#{post}'. For example, your path can be '/my-community/general#how-to-code' KEY is the api key of your community. MESSAGE, SIGNATURE, and TIMESTAMP must be generated from your server.

For more information on Federated Identity (SSO) and generating the sso props, please check Federated Identity help section on Muut.

Theming

You can pass a theme prop to change the basic styling of the commenting app. The following are the supported theme props and their default values:

Name	Default Value	Description
primaryColor	'#1FADC5'	Primary color (button, link etc)
primaryColorHover	'#188699'	Hover color for primary color
primaryDarkTextColor	'rgba(0,0,0,0.8)'	Primary text color
secondaryDarkTextColor	'rgba(0,0,0,0.4)'	Secondary text color
primaryLightTextColor	'#FFF'	Primary light color
accentColor	'#BE0000'	Accent color
warningColor	'#BE0000'	Warning color (dialog)
dialogBackgroundColor	primaryLightTextColor	Background color of dialog
likedHeartIconColor	'#FF57A8'	Color of heart icon when liked by the owner of the post/comment
onlineIndicatorColor	'#4CBE00'	Color of online user indicator
avatarWidth	'2.6em'	Width of the avatar image
avatarBorderRadius	'0.4em'	Border radius of the avatar image
avatarMarginRight	'1em'	Gap of avatar image and the post's title/body
metaFontSize	'90%'	Font size of post's meta
metaTextColor	secondaryDarkTextColor	Color of post's meta
postFontSize	'90%'	Font size of post's body
newPostBackgroundColor	'rgba(31,173,197,0.15)'	Highlight color of new loaded posts
newPostHighlightDuration	800	How long the highlight duration (ms)
newPostTimeColor	primaryDarkTextColor	Color of the time as indication of a new post
postPlaceholderColor	'#EEE'	Color of the post's place holder while being loaded
badgeBackgroundColor	'rgba(0, 0, 0, 0.2)'	Background color of Admin badge
badgeTextColor	primaryLightTextColor	Text color of an Admin badge
commentsCountFontSize	'150%'	Font size of the total number of posts/comments
commentsCountMargin	'0.6em 0'	Margin of post/comments count
tooltipBackgroundColor	'#333'	Background color of the tooltip
tooltipTextColor	primaryLightTextColor	Text color of the tooltip
For example:

import React, { Component } from 'react'
import Commenting from 'muut-io-react-commenting'

const sso = {...}
const theme = {
  primaryColor: '#FF0000',
  likedHeartIconColor: 'purple',
  onlineIndicatorColor: 'green',
  avatarBorderRadius: '50%',
  tooltipBackgroundColor: '#000'
}
class App extends Component {
  render() {
    return <Commenting sso={sso} theme={theme} />
  }
}

export default App

Using global styles

For a more granular level of customization, you can use a global style to target each element inside the commenting app. Most of the elements have a classname with a pattern of m-[element] so you can style any of the elements according to your liking. Note that to override the default styles, you can add a parent selector .moot on your selectors.

For example:

.moot .m-tooltip {
  background-color: 'black';
  color: 'white';
}

Demo

A working demo is provided in the demo folder of this repository. Just replace the API_KEY, API_SECRET, and PATH in the webpack.config.js with your own community's api key, secret key, and the path of the post, respectively.

You can then run the demo by cloning this repository and running:

npm install && npm start or yarn install && yarn start

Open localhost:8080 in your browser