@peerboard/react-components

Deprecated

Use our updated general manual

Usage

yarn add @peerboard/react-comopnents 

or

npm install @peerboard/react-comopnents 

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

// ...

<PeerboardForum
  style={{
     visibility: this.state.forumReady ? 'visible' : 'hidden',
     minHeight: 'calc(100vh - 10px)',
  }}
  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={location => {
    // Browser counts iframe state changes.
    this.props.history.replace(location);
  }}
  
  onCustomProfile={(url) => {
    // If you use custom profile link deep integration feature
    // you can make smooth transition to the profile page.
    // url is absolute, so you need to remove everything before the actual path.
    // Note: You cannot just use window.history because it will just change url without state change.
    //  You need to use react router history 
    //    https://reactrouter.com/web/api/withRouter
    //    https://reactrouter.com/web/api/Hooks/usehistory
    this.props.history.push(url.replace(document.location.origin, ''));
  }}
/>

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,
    };
  }

  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={{
             visibility: this.state.forumReady ? 'visible' : 'hidden',
             minHeight: 'calc(100vh - 10px)',
           }}
          boardId={1024681946} // Replace with your Board id
          prefix={this.prefix}
          jwtToken={this.jwtToken}
          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>
    );
  }
}