Integración con React

Renderiza la salida de unifast en aplicaciones React con @unifast/react, desde el renderizado HTML simple hasta el mapeo completo de componentes MDX.

@unifast/react proporciona utilidades para renderizar la salida de unifast en aplicaciones React, desde el renderizado HTML simple hasta el mapeo completo de componentes MDX.

Instalación

Uso de hastToReact

Convierte el HAst (el AST de HTML) a elementos React. Esto te permite mapear elementos HTML a componentes React personalizados sin inyectar HTML crudo.

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>;
}

Este enfoque es seguro por defecto: el AST se convierte en elementos React sin HTML crudo.

Renderizado de MDX

Para contenido MDX, usa compileToReact para obtener un componente React directamente:

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,
      }}
    />
  );
}

Mapeo de componentes

Tanto hastToReact como compileToReact aceptan un mapa components. Úsalo para reemplazar los elementos HTML por defecto con componentes React personalizados:

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>
  ),
};

Renderizado en el servidor

La compilación de unifast es síncrona y se ejecuta en Node.js, lo que la hace ideal para SSR:

// 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>
  );
}

Véase también