@react-rst/react

A lightweight, RSC-compatible reStructuredText (rST) renderer for React.

Installation

npm install @react-rst/react

Peer dependencies: react >= 18 and react-dom >= 18.

Quick Start

import { ReStructuredText } from '@react-rst/react';
import '@react-rst/react/styles.css'; // Optional default stylesheet

const doc = `
Title
=====

This is a paragraph with an admonition:

.. note::
   Admonitions, code blocks, and tables render out of the box.
`;

export default function App() {
  return <ReStructuredText content={doc} />;
}

Subpath Exports

• @react-rst/react: Main component <ReStructuredText> (includes parser + renderer).
• @react-rst/react/renderer: Hook-free AST renderer <RstRenderer> (~2.6 kB brotli) for React Server Components.
• @react-rst/react/client: Dynamic useRst hook for live browser-side editing and previews.
• @react-rst/react/styles.css: Default stylesheet matching standard Docutils and Sphinx classes.

Custom Elements & Directives

Custom HTML Components

<ReStructuredText
  content={doc}
  components={{
    a: ({ href, children, ...props }) => (
      <a href={href} className="custom-link" {...props}>
        {children}
      </a>
    ),
    h1: ({ children, id }) => <h1 id={id} className="title">{children}</h1>,
  }}
/>

Custom Directives

import { ReStructuredText, type DirectiveProps } from '@react-rst/react';

function Callout({ args, options, children }: DirectiveProps) {
  return (
    <div className="callout" style={{ borderColor: options.color as string }}>
      <h4>{args.join(' ')}</h4>
      <div>{children}</div>
    </div>
  );
}

<ReStructuredText
  content={doc}
  directives={{
    callout: Callout,
  }}
/>

License

MIT © Joshua Lauinger