README
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>
);
}
}