{"id":11726,"library":"react-innertext","title":"React innerText Extractor","description":"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.","status":"active","version":"1.1.5","language":"javascript","source_language":"en","source_url":"https://github.com/CharlesStover/react-innertext","tags":["javascript","innerText","jsx","react","reactjs","typescript"],"install":[{"cmd":"npm install react-innertext","lang":"bash","label":"npm"},{"cmd":"yarn add react-innertext","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-innertext","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency as it operates directly on React elements and JSX.","package":"react","optional":false},{"reason":"Peer dependency for TypeScript type definitions, as the library ships its own types.","package":"@types/react","optional":true}],"imports":[{"note":"The library exports a default function, so use a default import for ESM.","wrong":"import { innerText } from 'react-innertext';","symbol":"innerText","correct":"import innerText from 'react-innertext';"},{"note":"Standard CommonJS `require` for Node.js environments.","symbol":"innerText","correct":"const innerText = require('react-innertext');"},{"note":"When using TypeScript, the default import `innerText` will be typed automatically since type definitions are included.","symbol":"innerText","correct":"import innerText from 'react-innertext';"}],"quickstart":{"code":"import innerText from 'react-innertext';\nimport React from 'react';\n\nfunction MyComponent() {\n  const children = (\n    <div>\n      Hello <strong>world</strong>!\n      I am <span children={3} /> years old!\n    </div>\n  );\n\n  const extractedText = innerText(children);\n  console.log(extractedText); // Expected: 'Hello world! I am 3 years old!'\n\n  // A practical example: using innerText for a title attribute\n  function MyTableHeaderCell({ children }) {\n    return (\n      <th\n        children={children}\n        title={innerText(children)}\n      />\n    );\n  }\n\n  return (\n    <div>\n      <p>Original JSX:</p>\n      {children}\n      <p>Extracted text: {extractedText}</p>\n      <table>\n        <thead>\n          <tr>\n            <MyTableHeaderCell>\n              <b>Username</b>\n            </MyTableHeaderCell>\n          </tr>\n        </thead>\n      </table>\n    </div>\n  );\n}\n\n// In a real application, you would render MyComponent\n// ReactDOM.render(<MyComponent />, document.getElementById('root'));","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to version 1.1.4 or higher to ensure compatibility with Node.js and other non-browser environments.","message":"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.","severity":"breaking","affected_versions":"<1.1.4"},{"fix":"Use `import innerText from 'react-innertext';` for ESM, not named imports like `import { innerText } from 'react-innertext';`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Update `react-innertext` to version 1.1.4 or newer: `npm install react-innertext@latest` or `yarn upgrade react-innertext@latest`.","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.","error":"TypeError: Cannot read properties of undefined (reading 'children') or similar errors related to 'window' object"},{"fix":"Change `import { innerText } from 'react-innertext';` to `import innerText from 'react-innertext';`.","cause":"Incorrect import statement for `react-innertext` in an ESM project, trying to use a named import when it provides a default export.","error":"TypeError: innerText is not a function or TypeError: (0 , react_innertext__WEBPACK_IMPORTED_MODULE_2__.innerText) is not a function"}],"ecosystem":"npm"}