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