Add React Components to Banner - Vanilla Success
<main> <article class="userContent"> <p>You can create your own components then register them to be rendered after or before the SearchBar into the banner.</p><p>First, you have to implement your components in<code class="code codeInline" spellcheck="false" tabindex="0">plugins/my-plugin/src/scripts/entries/forum.tsx</code> or<code class="code codeInline" spellcheck="false" tabindex="0"> themes/my-theme/src/scripts/entries/forum.tsx</code> to register the components.</p><p>As described here :</p><ul><li><a href="https://success.vanillaforums.com/kb/articles/166-vanillas-frontend-build-system#source-files-and-entries" rel="nofollow noreferrer ugc">https://success.vanillaforums.com/kb/articles/166-vanillas-frontend-build-system#source-files-and-entries</a></li><li><a href="https://success.vanillaforums.com/kb/articles/165-javascript-css-quickstart#using-typescript" rel="nofollow noreferrer ugc">https://success.vanillaforums.com/kb/articles/165-javascript-css-quickstart#using-typescript</a></li></ul><h2 data-id="after-searchbar">After SearchBar</h2><p>Use <code class="code codeInline" spellcheck="false" tabindex="0">Banner.registerAfterSearchBar</code> to register a component to be rendered after the SearchBar</p><pre class="code codeBlock" spellcheck="false" tabindex="0">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); </pre><h2 data-id="before-searchbar">Before SearchBar</h2><p>You can also add components before the SearchBar by using <code class="code codeInline" spellcheck="false" tabindex="0">Banner.registerBeforeSearchBar</code> to register them as detailed below:</p><pre class="code codeBlock" spellcheck="false" tabindex="0">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); </pre><h2 data-id="sample-code">Sample code</h2><pre class="code codeBlock" spellcheck="false" tabindex="0">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); </pre><p><br></p> </article> </main>