@amy-app/react-components

Amy Render

We use a bare-bones approach to our render package, its a bit of a byo. You supply your own renderers into AmyRender

Supported Renderers:

LaTeX

• Katex (We recommend the react-katex npm package, but you could easily roll your own using the katex package)
• Most LaTeX renderers will possibley work fine, we just haven't tested them, there might be edge cases we haven't found yet.

Plots (Graphs)

• Plotly.js (This will most likely be the only supported one for a while, as our plots utilise many of their features)

Markdown

• Marked
• Most other Markdown renderers will work fine, We dont use any specialised markdown in our syntax.

Example config:

It is suggested to copy this config to a new file and import from that into your system.

This so you have the flexability to use your own renderers, and so the AmyRender package isnt huge.

// we need react, because this is a react package...
import React from "react";
import { AmyRender, AmyRenderConfig } from "@amy-app/react-components";
import "katex/dist/katex.min.css";

// these packages are optional (only these have been tested, but this allows us to support more in the future)
import marked from "marked";
import { BlockMath, InlineMath } from "react-katex";
import Plot from "react-plotly.js";

// set up the config, this lets the renderer know what to use to render the different AmySyntax sections
const renderConfig: AmyRenderConfig = {
    latex: {
        inline: (key: string, text: string) => <InlineMath key={key} math={text} />,
        block: (key: string, text: string) => <BlockMath key={key} math={text} />,
    },
    plot: (name: string, data: any, layout: any) => <Plot key={name} data={data} layout={layout} />,
    markdown: marked,
};

// default renderers
export function InstructionRender({ text, color }: { text: string; color?: "black" | "white" }) {
    return <AmyRender text={text} config={{ color: color || "black" }} renderConfig={renderConfig} />;
}

export function ExpressionRender({ text, color }: { text: string; color?: "black" | "white" }) {
    return (
        <AmyRender text={text} config={{ color: color || "black", useBlockMath: true }} renderConfig={renderConfig} />
    );
}