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