@belivvr/hubs-channel-ui v0.1.5

Hubs Channel UI

Introduce

This library add channel UI in mozilla/hubs

Install

npm i @belivvr/hubs-channel-ui --legacy-peer-deps

• Find package-lock.json in @belivvr/hubs-channel-ui part and copy
• Revert package-lock.json and paste @belivvr/hubs-channel-ui part

Usage

Add hub.js in under code.

import { Sidebar } from "./sidebar/Sidebar";
import { CloseButton } from "./input/CloseButton";

import {
  ChannelContainer,
  ChannelsButton,
  LightThemeIcon,
  DarkThemeIcon,
} from "@belivvr/hubs-channel-ui";

ChannelContainer

Find hub.js in this.state.sidebarId ? ( and paste under this

function handleClickPrivateChannelButton(channel) {
  // if you want to use private channel...
}

// ...

{this.state.sidebarId === "channels" && (
  <ChannelContainer
    Sidebar={Sidebar}
    CloseButton={CloseButton}
    data={data}
    usePrivateChannel={usePrivateChannel}
    error={isPrivateChannelError}
    onClose={() => this.setSidebar(null)}
    onClickPrivateChannelButton={handleClickPrivateChannelButton}
  />
)}

ChannelsButton

Find hub.js in toolbarCenter={ and paste under this

{entered && (
  <ChannelsButton
    ToolbarButton={ToolbarButton}
    onClick={() => this.toggleSidebar("channels")}
    LightThemeIcon={<img src={LightThemeIcon} alt="" />}
    DarkThemeIcon={<img src={DarkThemeIcon} alt="" />}
  />
)}