react-innertext

react-innertext is a tiny TypeScript utility that recursively walks a React element tree and returns the flattened plain-text string it would render, the same way the DOM’s innerText property does for HTML elements. It handles every node type React can produce — strings, numbers, booleans, null, undefined, arrays of children, and nested elements — collapsing them into a single string by recursing into each node’s children prop.

The library is deliberately minimal: a single ~50-line implementation with no runtime dependencies beyond a peer dependency on React itself. That makes it well suited for use cases like generating accessible title/aria-label attributes from rich JSX children, extracting searchable text from component trees, or measuring displayed content length — without reaching for a full DOM renderer or a heavier serialization library.

What You Get

• Type-safe innerText(jsx) function with a matching InnerText TypeScript interface and default export alias.
• Full support for every ReactNode type: strings, numbers, booleans, null, undefined, arrays, and nested elements.
• Zero runtime dependencies — only a peer dependency on React, keeping bundle size negligible.
• CommonJS and ES module import styles both work out of the box (require or import).

Common Use Cases

• Deriving an accessible title or aria-label attribute from JSX children that may contain nested elements.
• Extracting plain-text previews or search-indexable content from rich component trees.
• Measuring or truncating displayed text length before rendering complex children.
• Sanitizing JSX children down to a safe string for logging, analytics, or non-JSX contexts.

Under The Hood

Architecture The library is architecturally minimal by design: a single source file, src/index.ts, exports one function, innerText, that recursively reduces a React node into a plain-text string. A hasProps type guard narrows ReactNode to ReactElement so the function can safely check for a children prop, and a reduceJsxToString helper folds arrays of nodes into a single string via Array.prototype.reduce. There is no internal layering, dependency injection, or state — every call is a pure, synchronous transformation from input JSX to output string, with array and children-prop recursion as the only control flow. Because the entire public surface is one function (aliased onto itself as .default for CommonJS/ESM interop), any change to the core branching in innerText propagates directly to every consumer; there is no abstraction layer to absorb a breaking change.

Tech Stack The project is written in TypeScript (strict mode, es5 target, commonjs module output) and compiled with the bare tsc compiler via the build/prepublishOnly scripts — no bundler or transpiler pipeline is used despite legacy webpack.config.js/.babelrc references still listed in .npmignore (those files no longer exist in the repo). react and @types/react are declared only as peerDependencies with an intentionally permissive range (>=0.0.0 <=99), so the library imposes no version constraint on consuming apps. Tests run via mocha with ts-node/register for on-the-fly TypeScript execution and chai for assertions. There is no CI configuration currently in the repository (a .travis.yml reference remains only in .npmignore), and the published package ships only index.js and index.d.ts per the files field in package.json.

Code Quality A single test file, tests/index.test.tsx, exercises every branch of the innerText function — null, undefined, booleans, numbers, string literals, empty objects, childless elements, nested elements, and arrays of mixed node types — plus a check that the library works in a window-less (non-browser) environment. Error handling is implicit: there are no thrown exceptions or try/catch blocks, since every input type is matched explicitly and falls through to an empty-string default rather than failing. Naming is consistent and descriptive (hasProps, reduceJsxToString, innerText), and strict: true in tsconfig.json enforces full type-checking, but there is no linter/formatter configuration found and no CI pipeline currently wired up to run the test suite automatically on push.

API Design The public API is about as ergonomic as a single-purpose utility can be: one function, innerText(jsx), callable via import innerText from ‘react-innertext’ or const innerText = require(‘react-innertext’) thanks to the .default = innerText alias baked into the compiled output. There is no configuration object, no provider/context setup, and the README documents usage with three short, realistic examples (ESM, CommonJS, and a real-world accessible title case) that a developer can copy-paste in under a minute. Naming is minimal and unambiguous, and the .d.ts declarations mean TypeScript consumers get full inline documentation via editor tooling without needing to read external docs. The only friction is the very narrow scope — for anything beyond flattening JSX to text, a consumer needs a different tool entirely.