# @peerboard/react-components

> deprecated use https://community.peerboard.com/post/1162435747

Latest version **0.0.13** (published 2020-10-13) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @peerboard/react-components
pnpm add @peerboard/react-components
yarn add @peerboard/react-components
bun add @peerboard/react-components
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.13 |
| Published | 2020-10-13 |
| First published | 2020-06-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=6.0.0 |
| Dependencies | 0 |
| Unpacked size | 232.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vladislav Lebedev |
| Maintainers | vernon99, tonknaf |
| Keywords | forum, react, discussion, ui component, component |

## Links

- npm: https://www.npmjs.com/package/@peerboard/react-components
- Repository: https://github.com/PeerBoard/react-components
- Homepage: https://github.com/PeerBoard/react-components#readme
- Issues: https://github.com/PeerBoard/react-components/issues
- npm.io page: https://npm.io/package/@peerboard/react-components

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.13 (latest) — 2020-10-13
- 0.0.12 — 2020-09-15
- 0.0.11 — 2020-07-10
- 0.0.10 — 2020-06-04
- 0.0.9 — 2020-06-04

## README

## Deprecated

Use our updated [general manual](https://community.peerboard.com/post/1162435747?category=2097967386)

### Usage

```bash
yarn add @peerboard/react-comopnents 
```
or
```bash
npm install @peerboard/react-comopnents 
``` 

```jsx
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
```jsx
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>
    );
  }
}
```

---
_Source: https://npm.io/package/@peerboard/react-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._