@peerboard/peerboard-react

Usage

yarn add @peerboard/peerboard-react 

or

npm install @peerboard/peerboard-react 

import { PeerboardForum } from '@peerboard/peerboard-react';

// ...

<PeerboardForum
  style={{
    // Style the wrapper
  }}
  boardId={432432432} // Your Board id from settings 
  prefix='community' // Relative path at which the forum is rendered yourcustomdomain.com/community
  jwtToken={'...'} // Your integration bearer token from backend
  hideMenu={false} // Whether to hide standard menu or not
  onLoadFailed={() => {
    // Show error
  }}
  onLoadSuccess={() => {
    // Show forum. Note that in order to initialize forum should be rendered with 'display: none' for example. 
  }}
  onTitleChanged={title => window.document.title = "Forum: " + title} // Change your title accordingly
  onPathChanged={path => {
    // Browser counts iframe state changes.
    history.replaceState(null, '', path) // Update address bar. Provided prefix included.
  }}
/>

Real world mvp example of page component

class Forum extends React.Component {
  constructor(props) {
    super(props);
    this.jwtToken = null;
    this.prefix = 'community'; // assuming that this page rendered at yourcustomdomain.com/community
    this.state = {
      authReady: false,
      forumReady: false,
      error: null,
    };
  }

  componentWillMount() {
    this.props.onLoad();
  }

  componentWillUnmount() {
    this.props.onUnload();
  }

  componentDidMount() {
    const redirect = (document.location.pathname || "/").replace(`/${this.prefix}`, '');
    http.post('/generate-bearer-token', {
      redirect, // Pass requested sub path here
    }).then((result) => {
      this.jwtToken = result.token;
      this.setState({
        authReady: true, // Now we can render the forum component
      });
    });
  }

  renderForum() {
    return <div>
      {!(this.state.authReady && this.state.forumReady) && 'Loading forum... You can place your spinner here.'}
      {this.state.authReady && (
        <PeerboardForum
          style={{
            // Render component to start initialization but hide it until it finishes loading.
            display: this.state.forumReady ? 'block' : 'none'
          }}
          boardId={1024681946} // Replace with your Board id
          prefix={this.prefix}
          jwtToken={this.jwtToken}
          hideMenu={false}
          onLoadFailed={() => {
            this.setState({
              error: "Failed to load forum",
            });
          }}
          onLoadSuccess={() => {
            this.setState({
              forumReady: true,
            });
          }}
          onTitleChanged={title => window.document.title = "Forum: " + title}
          onPathChanged={location => window.history.replaceState(null, '', location)}
        />
      )}
    </div>
  }
  render() {
    return (
      <div className="container">
        {this.state.error ? (this.state.error) : (this.renderForum())}
      </div>
    );
  }
}