react-string-replace icon indicating copy to clipboard operation
react-string-replace copied to clipboard

Add ReactStringReplace Component

Open DerGoogler opened this issue 3 years ago • 3 comments

Here is an example how it could works

import * as React from "react";
import { ReactStringReplace, ReactStringReplaceRules } from "react-string-replace";

function App() {
  const rules: ReactStringReplaceRules = [
    {
      search: /(https?:\/\/\S+)/g,
      onMatch(match, index) {
        return (
          <a key={match + index} href={match}>
            {match}
          </a>
        );
      },
    },
    {
      search: /@(\w+)/g,
      onMatch(match, index) {
        return (
          <a key={match + index} href={`https://twitter.com/${match}`}>
            @{match}
          </a>
        );
      },
    },
    {
      search: /#(\w+)/g,
      onMatch(match, index) {
        return (
          <a key={match + index} href={`https://twitter.com/hashtag/${match}`}>
            #{match}
          </a>
        );
      },
    },
  ];

  return (
    <div>
      <ReactStringReplace rules={rules}>
        Hey @ian_sinn, check out this link https://github.com/iansinnott/ Hope
        to see you at #reactconf
      </ReactStringReplace>
    </div>
  );
}

export default App;

DerGoogler avatar Sep 23 '22 16:09 DerGoogler

hey thanks for this @DerGoogler. Changing the default export is bound to cause breakage, but could release this as v2.

If you add some testing for the new component to test.js I'd be happy to incorporate this. Also that will make sure the existing tests still run, since they use the default export.

(not to self, should add an action to run the tests for PRs)

iansinnott avatar Sep 24 '22 08:09 iansinnott

@iansinnott,

I know this is a bad idea, this would break many libraries and app when update their dependencies..

DerGoogler avatar Sep 24 '22 09:09 DerGoogler

Is there any chance to get v2 with this change?

dzikoysk avatar May 30 '23 16:05 dzikoysk