1. Home
  2. ChevronRightUtils
  3. ChevronRightreactToText

reactToText

Eliminar el árbol de marcado de componentes React para obtener una cadena de texto plano.

La utilidad reactToText analiza recursivamente un árbol de nodos React (incluyendo hijos anidados y diseños) y une los segmentos de cadenas en una sola cadena de texto plano. Es útil para construir índices de búsqueda personalizados, tarjetas descriptivas y vistas previas de texto.


ImportaciónLink

import { reactToText } from 'boltdocs/client'

FirmaLink

function reactToText(node: React.ReactNode): string

ParámetrosLink

  • node: Cualquier nodo React válido o instancia de componente.

Ejemplo: Construyendo un Atributo de Título desde HijosLink

import { reactToText } from 'boltdocs/client'

interface HeaderBlockProps {
  children: React.ReactNode
}

export function HeaderBlock({ children }: HeaderBlockProps) {
  // Convert children like "Hello <strong>World</strong>" to plain "Hello World"
  const textTitle = reactToText(children)

  return (
    <div className="group relative">
      <h2 title={textTitle} className="text-xl font-semibold">
        {children}
      </h2>
      <button
        onClick={() => navigator.clipboard.writeText(textTitle)}
        className="opacity-0 group-hover:opacity-100 text-xs ml-2 text-zinc-400"
      >
        Copy Text
      </button>
    </div>
  )
}
Last updated on July 27, 2026

Was this page helpful?