Registry / serialization / react-innertext

react-innertext

library1.1.5jsnpmunverified

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.

serialization

npm install react-innertext

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-INNERTEXT

react-innertext

serializationjavascriptv1.1.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

innerText

✓ import innerText from 'react-innertext';

✗ 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.

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'));

Debug

Known issues

gotchaThis 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.

affects: >=1.0.0

breakingPrior 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.

affects: <1.1.4

gotchaWhen 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';`.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'children') or similar errors related to 'window' object

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

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';`.

Upgrade

Version history

1.1.5latest on npm

Audit

Dependencies

reactrequiredPeer dependency as it operates directly on React elements and JSX.

@types/reactoptionalPeer dependency for TypeScript type definitions, as the library ships its own types.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/CharlesStover/react-innertext ↗

packagehttps://www.npmjs.com/package/react-innertext ↗