# jp-test-io-commenting

> Muut's Commenting using IO-client

Latest version **0.0.4** (published 2018-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install jp-test-io-commenting
pnpm add jp-test-io-commenting
yarn add jp-test-io-commenting
bun add jp-test-io-commenting
```

## Health

**Score 5/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: insecure dependencies; abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2018-05-08 |
| First published | 2018-05-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 172.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jay-R Pampellona |
| Maintainers | jpampellona |

## Links

- npm: https://www.npmjs.com/package/jp-test-io-commenting
- npm.io page: https://npm.io/package/jp-test-io-commenting

## Dependencies (12)

- [npm](https://npm.io/package/npm.md) ^6.0.0
- [react](https://npm.io/package/react.md) ^15.x
- [redux](https://npm.io/package/redux.md) ^3.x
- [io-client](https://npm.io/package/io-client.md) git+ssh://git@github.com/muut/io-client.git#1.0.2
- [muut-lang](https://npm.io/package/muut-lang.md) git+ssh://git@github.com/muut/language.git
- [react-dom](https://npm.io/package/react-dom.md) ^15.x
- [classnames](https://npm.io/package/classnames.md) ^2.x
- [prop-types](https://npm.io/package/prop-types.md) ^15.x
- [react-redux](https://npm.io/package/react-redux.md) ^5.x
- [styled-components](https://npm.io/package/styled-components.md) ^3.x
- [immutability-helper](https://npm.io/package/immutability-helper.md) ^2.x
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^2.x

## Recent versions

- 0.0.4 (latest) — 2018-05-08
- 0.0.3 — 2018-05-08
- 0.0.2 — 2018-05-08
- 0.0.1 — 2018-05-08

## README

A react component to easily add Muut's [Flat Commenting](https://learn.muut.com/demos/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

```jsx
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](https://learn.muut.com/federated-id) help section on [Muut](https://muut.com/).

## 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:

```jsx
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:
```css
.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](http://localhost:8080) in your browser

---
_Source: https://npm.io/package/jp-test-io-commenting · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._