Skip to main content
Version: v2.x

Markdown Parsing

NLUX comes with its own markdown parser that can be used to render markdown content in the chat area.
On top of that, a <Markdown> primitive is provided to render markdown in custom renderers.

Usage​

With Streaming Custom Renderers​

In order to use markdown stream parser with custom renderers, you can simply pass the props.containerRef to the container element where you would like to add the rendered markdown content, and NLUX will take care of the rest.

import {memo} from 'react';
import {ResponseRenderer, Markdown} from '@nlux/react';

const responseRenderer: ResponseRenderer<string> = memo((props) => {
    const {props.containerRef} = props;

    return (
        <div className="myCustomRenderer">
            <div ref={props.containerRef}/>
        </div>
    );
});

With Batched Custom Renderers​

If you are using batched custom renderers, or your would like to add markdown to initial conversation messages, you can use the <Markdown> primitive.

import {memo} from 'react';
import {ResponseRenderer, Markdown} from '@nlux/react';

const responseRenderer: ResponseRenderer<string> = memo((props) => {
    const {content} = props;
    return (
        <div className="myCustomRenderer">
            <Markdown>{content}</Markdown>
        </div>
    );
});