jp-test-io-commenting v0.0.4

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:

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