diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000000000000000000000000000000000..75352116828e61ece4575fecef317792d8d3ab58 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +node_modules +dist +*.log +.DS_Store diff --git a/README.md b/README.md new file mode 100644 index 0000000000000000000000000000000000000000..ad9645a578faf85284f331a3003f0aba80746a3b --- /dev/null +++ b/README.md @@ -0,0 +1,67 @@ +# `@clo/react-markdown` + +This package exports a React component to render markdown using the [unified] +ecosystem's markdown tools ([remark], [rehype]). The exported `` +component is extremely memoized, making it suitable for streaming situations +such as LLM chat interfaces. + +- **Bring your Existing Pipeline**: The primary option for configuration is + providing a `unified.Processor` with or without the `rehypeReact` plugin. + Additionally, you can override the element renderers with the `components` + attribute. By default, `@clo/react-markdown` applies a bare bones config so you + can get started with just ``. Configuration is done + either with a provider, or right at the component level. +- **Handle Partial Markdown**: When the `predict` prop is set, sequences like + `hello **world` will be emitted as `hello world`. + +The motivation for this package is to have an easy to understand version of +[Streamdown]. With me banning all Vercel software across the company I work at, +we needed a simple, trustable solution for this problem. Some other differences +with their library: + +- **Better Memoization**: All inline components will preserve their state, even + as adjacent content changes. This is done to preserve remounts for things like + custom `` tags or other components. (For example, if a custom `` fetches + previewing data and provides a hover card, that card won't flicker). +- **Not Drop-In Replacement**: This APIs is new, and targets most use cases with + a small migration. +- **Headless UI**: No built in styles or components, bring your own CSS to blend + your markdown with your existing theme. `@clo/react-markdown` simply takes in your + existing `unified` pipeline and works off of that. +- **Easy to Audit**: Just a few hundred lines of highly commented code + +[Streamdown]: https://streamdown.ai +[unified]: https://unifiedjs.com/ +[remark]: https://remark.js.org/ + +## Getting Started + +```tsx +import { Markdown } from "@clo/react-markdown"; +import remarkGfm from "remark-gfm"; +import remarkParse from "remark-parse"; +import { unified } from "unified"; + +// Define any unified processing pipeline. We expect that your +// app already has one of these. +const processor = unified().use(remarkParse).use(remarkGfm); + +// Define custom components. (maps to rehypeReact's option) +const components = { + a: MarkdownLink, + code: InlineCode, +}; + +export function HelloWorld() { + return ( + + ); +} +``` diff --git a/example/App.tsx b/example/App.tsx new file mode 100644 index 0000000000000000000000000000000000000000..9cd27a6d7cff082dd2f235789a03e594b688759f --- /dev/null +++ b/example/App.tsx @@ -0,0 +1,87 @@ +import { useDeferredValue, useState } from "react"; +import { Streamdown } from "streamdown"; +import { Markdown } from "../src/mod"; +import { components, streamdownComponents } from "./markdown-components"; +import { initialMarkdown, processor } from "./markdown-demo"; + +type Renderer = "memo" | "streamdown"; +const rendererOptions: Array<{ label: string; value: Renderer }> = [ + { label: "MemoMarkdown", value: "memo" }, + { label: "Streamdown", value: "streamdown" }, +]; + +function getRendererButtonClass(isActive: boolean) { + return isActive + ? "rounded bg-white px-2.5 py-1 text-xs font-medium text-stone-900 shadow-sm" + : "rounded px-2.5 py-1 text-xs text-stone-600 hover:text-stone-900"; +} + +export function App() { + const [content, setContent] = useState(initialMarkdown); + const deferredContent = useDeferredValue(content); + const [renderer, setRenderer] = useState("memo"); + + return ( +
+
+
+
+

Source

+ +
+