Docs
🎨 ⏐ Customization
Markdown Plugins

Markdown Plugins

reachat uses remark (opens in a new tab) to parse and render markdown. You can use the remarkPlugins prop to add custom plugins to the markdown parser. Any plugin that is supported by remark should work here as well.

Pre-packaged plugins

Out of the box, we provide several plugins:

The Chart plugin is enabled by default and supports rendering charts using fenced code blocks. See the Charts documentation for more details.

You can view the Storybook Stories (opens in a new tab) for more examples.

Writing your own plugin

We will build a plugin that will identify and render CVE links. Below is a sample response:

Please review the following CVEs:
 
- CVE-2021-34527
- CVE-2021-44228
- CVE-2021-45046

We can leverage the remarkPlugins prop to add custom plugins to the markdown parser. Below is an example of the plugin code:

import { findAndReplace } from 'mdast-util-find-and-replace';
 
const CVE_REGEX = /(CVE-(19|20)\d{2}-\d{4,7})/gi;
 
export function remarkCve() {
  return (tree, _file) => {
    findAndReplace(tree, [[
      CVE_REGEX,
      replaceCve as unknown as any
    ]]);
  };
 
  function replaceCve(value, id) {
    return [
      {
        type: 'link',
        url: `https://cve.mitre.org/cgi-bin/cvename.cgi?name=${id}`,
        children: [
          { children: [{ type: 'text', value: value.trim() }] }
        ]
      }
    ];
  }
}

After you integrate this into your app, the above markdown will render as follows:

Please review the following CVEs:
 
- [CVE-2021-34527](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-34527)
- [CVE-2021-44228](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-44228)
- [CVE-2021-45046](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-45046)

To leverage our new plugin, we need to include it in the remarkPlugins prop.

import { Chat } from 'reachat';
import { remarkCve } from 'PATH_YOU_SAVED_THE_PLUGIN';
 
export function App() {
  return (
    <Chat remarkPlugins={[remarkCve]}>
      ...rest of your code...
    </Chat>
  );
}

Custom Markdown Components (New in v2.1)

You can customize how specific markdown elements are rendered using the markdownComponents prop. This is useful for overriding the default rendering of charts, code blocks, or other markdown elements.

Basic Usage

import { Chat, ChartRenderer } from 'reachat';
 
<Chat
  markdownComponents={{
    // Custom chart rendering
    chart: (props) => (
      <ChartRenderer {...props} className="custom-chart" />
    ),
    // Custom code block rendering
    code: ({ node, inline, className, children, ...props }) => {
      const match = /language-(\w+)/.exec(className || '');
      return !inline && match ? (
        <SyntaxHighlighter
          language={match[1]}
          PreTag="div"
          {...props}
        >
          {String(children).replace(/\n$/, '')}
        </SyntaxHighlighter>
      ) : (
        <code className={className} {...props}>
          {children}
        </code>
      );
    }
  }}
>
  {/* ... */}
</Chat>

Available Component Overrides

You can override any standard markdown element:

  • chart - Chart rendering (reachat-specific)
  • code / pre - Code blocks
  • a - Links
  • img - Images
  • table / thead / tbody / tr / td / th - Tables
  • h1 through h6 - Headings
  • p - Paragraphs
  • ul / ol / li - Lists
  • And many more standard markdown elements

For a complete list of available overrides, see the react-markdown components documentation (opens in a new tab).

Custom ComponentsModels