Frontend Development

Add React Components to Banner

You can create your own components then register them to be rendered after or before the SearchBar into the banner.

First, you have to implement your components inplugins/my-plugin/src/scripts/entries/forum.tsx or themes/my-theme/src/scripts/entries/forum.tsx to register the components.

As described here :

After SearchBar

Use Banner.registerAfterSearchBar to register a component to be rendered after the SearchBar

import Banner from "@library/banner/Banner";
import { IBannerProps } from "@library/banner/Banner";
import React from "react";

function MyComponent(props: IBannerProps) {
  return <>Hello Word</>
}

Banner.registerAfterSearchBar(MyComponent);

Before SearchBar

You can also add components before the SearchBar by using Banner.registerBeforeSearchBar to register them as detailed below:

import Banner from "@library/banner/Banner";
import { IBannerProps } from "@library/banner/Banner";
import React from "react";

function MyComponent(props: IBannerProps) {
  return <>Hello Word</>
}

Banner.registerBeforeSearchBar(MyComponent);

Sample code

import Banner from "@library/banner/Banner";
import React from "react";
import { IBannerProps } from "@library/banner/Banner";
import { css } from "@emotion/css";
import { globalVariables } from "@library/styles/globalStyleVars";
import { ColorsUtils } from "@library/styles/ColorsUtils";

function MyComponent(props: IBannerProps) {
  const styles = css({
    color: ColorsUtils.colorOut(globalVariables().elementaryColors.white),
    fontSize: 20
  })
  return <div className={styles}>Hello Word</div>;
}

Banner.registerAfterSearchBar(MyComponent);