@react-lib-tech/react-text-extractor

A tiny React component library + CLI utility to extract all visible text from your React project (JS/JSX) and optionally transform it using OpenAI (translation, summarization, i18n, etc.).

✨ Features

• 🔍 Extracts text content from React components:
  • Static JSX text
  • Attributes (placeholder, title, alt, aria-label)
• 🛑 Ignores:
  • HTML tags, numbers, hex colors, and special characters
• ⚡ Works with:
  • Direct React rendering (renderToString + JSDOM)
  • Fallback parsing (@babel/parser via extractTextFromAst.js)
• 🤖 Optional AI-powered text transformation with OpenAI:
  • Translate
  • Summarize
  • Rewrite
  • Convert into i18n keys

📦 Installation

npm install @react-lib-tech/react-text-extractor

🚀 Usage

1. Basic Extraction

import { ReactTextExtractor } from "@react-lib-tech/react-text-extractor";

(async () => {
  const result = await ReactTextExtractor({
    rootPath: "./src", // path to your React project
    returnBoth: true,  // get both raw + filtered
  });

  console.log("Raw:", result.raw);
  console.log("Filtered:", result.filtered);
})();

2. With OpenAI Transformation

import { ReactTextExtractor } from "@react-lib-tech/react-text-extractor";
import fetch from "node-fetch";
(async () => {
  const result = await ReactTextExtractor({
    rootPath: "./src",
    returnBoth: true,
    fetchImpl : fetch,
    prompt: "Translate everything into Hindi", // 👈 AI prompt
    aiModel: "gpt-4o-mini",                    // default: gpt-4o-mini
    aiTemperature: 0.2,                        // creativity (0 = deterministic)
    aiSystemPrompt: "You are a professional translator.",
    openaiApiKey: process.env.OPENAI_API_KEY,  // 👈 user-supplied key
  });

  console.log("✅ AI Transformed:", result.filtered);
})();

3. Example Output

{
  "raw": [
    "Hello world",
    "Submit",
    "Enter your name"
  ],
  "filtered": [
    "नमस्ते दुनिया",
    "जमा करें",
    "अपना नाम दर्ज करें"
  ]
}

⚙️ Options

| Option | Type | Default | Description | |-------------------|----------|---------|-------------| | rootPath | string | "./src" | Folder to scan recursively | | skipWord | string[] | [] | Extra words/tags to skip | | returnBoth | boolean | true | Return { raw, filtered } | | applyFilter | boolean | true | If false, returns raw only | | fetchImpl | fetch | null | import fetch from "node-fetch"; | | prompt | string | null | AI instruction (e.g., "Translate to French") | | aiModel | string | "gpt-4o-mini" | OpenAI model | | aiTemperature | number | 0.3 | Randomness/creativity | | aiSystemPrompt | string | "You are a text transformation assistant." | AI system role | | openaiApiKey | string | process.env.OPENAI_API_KEY | API key |

🔑 OpenAI Integration

Make sure to set your key either:

• In environment:

  export OPENAI_API_KEY="sk-xxxxx"

• Or pass explicitly:

  openaiApiKey: "sk-xxxxx"

🤝 Contributing

1. Fork & clone the repo
2. Run npm install
3. Build with npm run build
4. Test with a sample React project

📜 License

MIT © 2025 Abhishek Kumar Singh