{"library":"react-string-replace","title":"React String Replace","description":"react-string-replace is a lightweight JavaScript utility designed to safely replace substrings or regular expression matches within a given string or array, converting them into an array containing React components and strings. It is currently at stable version 2.0.1 and has seen active development, with recent tooling modernizations and breaking changes in major versions. The library's core differentiator is its ability to perform replacements suitable for React's rendering model without relying on `dangerouslySetInnerHTML`, thus maintaining React's built-in XSS protection. It offers a simple API for common tasks like highlighting text, converting URLs, or parsing mentions, and supports chaining for multiple replacement patterns. It has zero runtime dependencies and ships with TypeScript types, making it suitable for modern React applications.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-string-replace"],"cli":null},"imports":["import reactStringReplace from 'react-string-replace';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import reactStringReplace from 'react-string-replace';\nimport React from 'react';\n\nfunction ProcessedContent() {\n  const text = \"Hey @ian_sinn, check out this link https://github.com/iansinnott/ Hope to see you at #reactconf\";\n  let replacedText;\n\n  // Match URLs\n  replacedText = reactStringReplace(text, /(https?:\\/\\/\\S+)/g, (match, i) => (\n    <a key={match + i} href={match} target=\"_blank\" rel=\"noopener noreferrer\">\n      {match}\n    </a>\n  ));\n\n  // Match @-mentions\n  replacedText = reactStringReplace(replacedText, /@(\\w+)/g, (match, i) => (\n    <a key={match + i} href={`https://twitter.com/${match}`} target=\"_blank\" rel=\"noopener noreferrer\">\n      @{match}\n    </a>\n  ));\n\n  // Match hashtags\n  replacedText = reactStringReplace(replacedText, /#(\\w+)/g, (match, i) => (\n    <a key={match + i} href={`https://twitter.com/hashtag/${match}`} target=\"_blank\" rel=\"noopener noreferrer\">\n      #{match}\n    </a>\n  ));\n\n  return <div>{replacedText}</div>;\n}\n\n// To use, render <ProcessedContent /> within a React component tree.\n// For example:\n// ReactDOM.render(<ProcessedContent />, document.getElementById('root'));","lang":"typescript","description":"Demonstrates how to perform multiple chained string replacements on a single text string, transforming URLs, @-mentions, and hashtags into clickable React `<a>` elements, suitable for rendering within a React component.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}