React

Using Muut in React

Creating React App

To easily create a new React app from scratch, we will use create-react-app.
Let's create react-muut app.

npx create-react-app react-muut
cd react-muut
npm start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)
For more detailed step by step instruction, please follow this guide.

Adding Muut

  1. Muut requires jQuery to run, so let's add it in our public/index.html file.

      <!DOCTYPE html>
      <html lang="en">
        <head>
          ...
          <title>React App</title>
          <script src="http://code.jquery.com/jquery.min.js"></script>
        </head>
  2. Replace the content of App.js with the following:

      import React, { Component } from 'react'
      import './App.css'
    
      const forumName = 'goma'
      class App extends Component {
        loadMuutForum = () => {
          window.$('.muut').muut(`https://muut.com/i/${forumName}`)
          if (window.muut.messaging) {
            window.muut.messaging(forumName)
          }
        }
        componentDidMount() {
          if (!window.muut) {
            const muutScript = document.createElement('script')
            muutScript.async = true
            muutScript.defer = true
            muutScript.src = '//cdn.muut.com/1/moot.min.js'
            muutScript.onload = this.loadMuutForum
            document.body.appendChild(muutScript)
          } else {
            this.loadMuutForum()
          }
        }
        render() {
          return (
            <div>
              <span className="muut" />
              <span className="muut-messaging">Messages</span>
            </div>
          )
        }
      }
      export default App
  3. Replace the content of App.css with the following:

      body {
        font: normal 18px "proxima nova";
        color: #333;
        margin: 0;
      }
      main {
        max-width: 600px;
        margin: 40px auto;
        padding: 0 .9em;
      }
      h1  {
        font-weight: 300;
      }
      img {
        max-width: 100%;
      }
      a { color: #1fadc5 }
      header {
        background-color: #555;
        padding: 1em 2em;
      }
      header a {
        text-transform: uppercase;
        text-decoration: none;
        letter-spacing: 1px;
        color: #fff;
        font-size: 90%;
        margin-right: .9em;
      }
      .muut-messaging {
        display: none;
      }
      .active { opacity: .4; }
  4. To run the app, open http://localhost:3000 in the browser.