{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-innertext"],"cli":null},"imports":["import innerText from 'react-innertext';","const innerText = require('react-innertext');","import innerText from 'react-innertext';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}