React innerText Extractor

1.1.5 · active · verified Sun Apr 19

react-innertext is a utility package designed to extract the plain text content from React JSX objects, mimicking the behavior of the native DOM `innerText` property. It recursively traverses React elements, including children and fragments, to produce a single, concatenated string. This is particularly useful for scenarios requiring a plain text representation of complex React component trees, such as generating `title` attributes, SEO metadata, or for accessibility purposes where only the text content is needed. The current stable version is 1.1.5. While its release cadence appears infrequent based on the provided history, the project is maintained, with recent updates (v1.1.4) addressing Node.js compatibility and incorporating built-in TypeScript definitions. Its key differentiator is its straightforward API for handling React's virtual DOM, providing a direct equivalent to `innerText` without requiring a full DOM render or complex parsing logic.

Common errors

```
TypeError: Cannot read properties of undefined (reading 'children') or similar errors related to 'window' object
```
cause Using `react-innertext` in a Node.js (server-side rendering) environment with a version older than 1.1.4, which had dependencies on browser-specific globals.

fix Update `react-innertext` to version 1.1.4 or newer: `npm install react-innertext@latest` or `yarn upgrade react-innertext@latest`.
```
TypeError: innerText is not a function or TypeError: (0 , react_innertext__WEBPACK_IMPORTED_MODULE_2__.innerText) is not a function
```
cause Incorrect import statement for `react-innertext` in an ESM project, trying to use a named import when it provides a default export.

fix Change `import { innerText } from 'react-innertext';` to `import innerText from 'react-innertext';`.

Warnings

gotcha This utility extracts text from React elements and does not simulate full browser rendering. It will not execute JavaScript within the JSX or account for CSS styling that might visually hide or modify text content in a browser environment.
Fix: Be aware of its limitations: `react-innertext` is for semantic text extraction from the virtual DOM, not for visual content parsing or JavaScript execution.
breaking Prior to version 1.1.4, `react-innertext` had issues running in `window`-less environments, such as Node.js for server-side rendering (SSR). This could lead to errors or incorrect behavior during SSR.
Fix: Upgrade to version 1.1.4 or higher to ensure compatibility with Node.js and other non-browser environments.
gotcha When migrating existing CommonJS projects to use ESM, ensure you update your import statements from `require()` to `import` statements and correctly handle the default export.
Fix: Use `import innerText from 'react-innertext';` for ESM, not named imports like `import { innerText } from 'react-innertext';`.

Install

npm install react-innertext npm
yarn add react-innertext yarn
pnpm add react-innertext pnpm

Imports

innerText
wrong:
```
import { innerText } from 'react-innertext';
```
correct:
```
import innerText from 'react-innertext';
```
The library exports a default function, so use a default import for ESM.
innerText
```
const innerText = require('react-innertext');
```
Standard CommonJS `require` for Node.js environments.
innerText
```
import innerText from 'react-innertext';
```
When using TypeScript, the default import `innerText` will be typed automatically since type definitions are included.

Quickstart

Demonstrates how to import and use `react-innertext` to extract plain text from complex JSX structures, including a practical application in a component's `title` attribute.

import innerText from 'react-innertext';
import React from 'react';

function MyComponent() {
  const children = (
    <div>
      Hello <strong>world</strong>!
      I am <span children={3} /> years old!
    </div>
  );

  const extractedText = innerText(children);
  console.log(extractedText); // Expected: 'Hello world! I am 3 years old!'

  // A practical example: using innerText for a title attribute
  function MyTableHeaderCell({ children }) {
    return (
      <th
        children={children}
        title={innerText(children)}
      />
    );
  }

  return (
    <div>
      <p>Original JSX:</p>
      {children}
      <p>Extracted text: {extractedText}</p>
      <table>
        <thead>
          <tr>
            <MyTableHeaderCell>
              <b>Username</b>
            </MyTableHeaderCell>
          </tr>
        </thead>
      </table>
    </div>
  );
}

// In a real application, you would render MyComponent
// ReactDOM.render(<MyComponent />, document.getElementById('root'));

view raw JSON →