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.$('#my-community').muut()
      }
      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>
            <a id="my-community" href={`https://muut.com/i/${forumName}`}>
              Community
            </a>
           <!--optional messaging code -->
           <span className="muut-messaging">Messages</span>
          </div>
        )
      }
    }
    export default App

    If you're planning on using Federated ID you can use this as your starting point:

    import React, { Component } from 'react'
    import './App.css'
    
    const forumName = 'YOUR_COMMUNITY'
    const opts = {
      sso: true,
      api: {
        key: 'YOUR_API_KEY',
        // generate the following on the server side
        message: 'MESSAGE',
        signature: 'SIGNATURE',
        timestamp: TIMESTAMP,
      },
    }
    class App extends Component {
      loadMuutForum = () => {
        window.$('#my-community').muut(opts)
      }
      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 (
          <a id="my-community" href={`https://muut.com/i/${forumName}`}>
            Community
          </a>
        )
      }
    }
    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.