React-Integration

Rendern Sie unifast-Ausgaben in React-Anwendungen mit @unifast/react – vom einfachen HTML-Rendering bis zum vollständigen MDX-Komponenten-Mapping.

@unifast/react bietet Hilfsfunktionen zum Rendern von unifast-Ausgaben in React-Anwendungen – vom einfachen HTML-Rendering bis zum vollständigen MDX-Komponenten-Mapping.

Installation

Verwendung von hastToReact

Konvertieren Sie den HAst (HTML-AST) in React-Elemente. Dies ermöglicht es Ihnen, HTML-Elemente ohne Einfügen von rohem HTML auf benutzerdefinierte React-Komponenten abzubilden.

import { compile } from "@unifast/node";
import { hastToReact } from "@unifast/react";

const result = compile(source, { outputKind: "hast" });
const elements = hastToReact(result.output, {
  components: {
    h1: (props) => <h1 className="heading" {...props} />,
    a: (props) => <a className="link" target="_blank" {...props} />,
    pre: CodeBlock,
  },
});

function Page() {
  return <article>{elements}</article>;
}

Dieser Ansatz ist standardmäßig sicher – der AST wird in React-Elemente umgewandelt, ohne rohes HTML zu verwenden.

MDX rendern

Verwenden Sie für MDX-Inhalte compileToReact, um direkt eine React-Komponente zu erhalten:

import { compile } from "@unifast/node";
import { compileToReact } from "@unifast/react";

const result = compile(source, { inputKind: "mdx" });
const Content = compileToReact(result);

function Page() {
  return (
    <Content
      components={{
        Alert: MyAlertComponent,
        CodeBlock: MyCodeBlock,
      }}
    />
  );
}

Komponenten-Mapping

Sowohl hastToReact als auch compileToReact akzeptieren eine components-Map. Verwenden Sie diese, um Standard-HTML-Elemente durch benutzerdefinierte React-Komponenten zu ersetzen:

const components = {
  // Replace headings
  h1: ({ children }) => <h1 className="text-3xl font-bold">{children}</h1>,

  // Custom code blocks
  pre: ({ children, ...props }) => <CodeBlock {...props}>{children}</CodeBlock>,

  // External links open in new tab
  a: ({ href, children }) => (
    <a href={href} target={href?.startsWith("http") ? "_blank" : undefined}>
      {children}
    </a>
  ),
};

Server-seitiges Rendering

Die unifast-Kompilierung ist synchron und läuft in Node.js, was sie ideal für SSR macht:

// server.tsx
import { compile, frontmatter } from "@unifast/node";
import { hastToReact } from "@unifast/react";

export async function getStaticProps() {
  const source = await readFile("content/post.md", "utf8");
  const result = compile(source, {
    plugins: [frontmatter()],
    outputKind: "hast",
  });

  return {
    props: {
      hast: result.output,
      meta: result.frontmatter,
    },
  };
}

function Post({ hast, meta }) {
  const content = hastToReact(hast);
  return (
    <article>
      <h1>{meta.title}</h1>
      {content}
    </article>
  );
}

Siehe auch